vue导入html登陆页,Vue 实现 登陆后打开主页面（登陆组件 + 主页面组件）
本次演示，项目所需
iview，router
首先
在 views 目录 新建 两个 组件 ( login.vue ，index.vue )
login.vue
登录
登 录
export default {
methods: {
login() {
// 假设登陆成功，则跳转到 index 组件
this.$router.replace('/index');
}
}
}
background-image: url(../assets/timg2.jpg);
background-size: 100%;
background-repeat: no-repeat;
background-position: center center;
}
* {
margin: 0;
padding: 0;
}
#wrap {
height: 600px;
width: 100%;
background-position: center center;
position: relative;
}
#head {
height: 120px;
width: 100;
background-color: #66CCCC;
text-align: center;
position: relative;
}
#wrap .logGet {
height: 408px;
width: 368px;
position: absolute;
background-color: #FFFFFF;
top: 100px;
right: 15%;
}
.logC a button {
width: 100%;
height: 45px;
background-color: #ee7700;
border: none;
color: white;
font-size: 18px;
}
.logGet .logD.logDtip .p1 {
display: inline-block;
font-size: 28px;
margin-top: 30px;
width: 86%;
}
#wrap .logGet .logD.logDtip {
width: 86%;
border-bottom: 1px solid #ee7700;
margin-bottom: 60px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
}
.logGet .lgD img {
position: absolute;
top: 12px;
left: 8px;
}
.logGet .lgD input {
width: 100%;
height: 42px;
text-indent: 2.5rem;
}
#wrap .logGet .lgD {
width: 86%;
position: relative;
margin-bottom: 30px;
margin-top: 30px;
margin-right: auto;
margin-left: auto;
}
#wrap .logGet .logC {
width: 86%;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.title {
font-family: "宋体";
color: #FFFFFF;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* 使用css3的transform来实现 */
font-size: 36px;
height: 40px;
width: 30%;
}
.copyright {
font-family: "宋体";
color: #FFFFFF;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* 使用css3的transform来实现 */
height: 60px;
width: 40%;
text-align: center;
}
index.vue
border: 1px solid #d7dde4;
background: #f5f7f9;
position: relative;
border-radius: 4px;
overflow: hidden;
}
.layout-logo{
width: 100px;
height: 30px;
background: #5b6270;
border-radius: 3px;
float: left;
position: relative;
top: 15px;
left: 20px;
}
.layout-nav{
width: 420px;
margin: 0 auto;
margin-right: 20px;
}
Item 1
Item 2
Item 3
Item 4
Item 1
Option 1
Option 2
Option 3
Item 2
Option 1
Option 2
Item 3
Option 1
Option 2
Home
Components
Layout
export default {
}
index.vue 要渲染两个组件( 子组件，模拟 )
在 components 目录 中 新建两个 vue 文件
one.vue
index 页面 里 的 第一个 组件
export default {
data() {
return {
};
}
}
two.vue
index 页面 里 的 第二个 组件
export default {
data() {
return {
};
}
}
修改 App.vue 文件
直接下来，在main.js 中 导入login 和 index 两个模块
在 router.js 文件 中 注册 组件
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [//一级路由
{
path: '/',
name: 'login',
component: () => import('./views/login.vue')
},
{
path:'/index',
name:'index',
component: () => import('./views/index.vue'),
children:[//二级路由
{
path:'/one',
name:'one',
component:() => import('./components/one.vue')
},
{
path:'/two',
name:'two',
component:() => import('./components/two.vue')
}
]
}
]
})
根目录下，访问直接是 显示 login.vue 组件
效果：
总结
以上是生活随笔为你收集整理的vue导入html登陆页,Vue 实现 登陆后打开主页面（登陆组件 + 主页面组件）的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： 文件桌面跟计算机同步删除吗,电脑里桌面文
- 下一篇： vue 2个方法先后执行_有效快速制作工