路由使用 vue-router
组件库使用 vue-ydui
效果图：
登录.png
主界面-首页.png
主界面-办事大厅.png
项目结构
图片.png
大体流程
图片.png
路由代码
import Vue from 'vue'
import Router from 'vue-router'
import home from '../page/home'
import office from '../page/office'
import mine from '../page/mine'
import mainPage from '../page/mainPage'
import loginPage from '../page/loginPage'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
component: loginPage
},
{
path: '/mainPage',
redirect: 'home',//子路由默认加载第一个界面
component: mainPage,
children: [{//子路由
path: '/home',
component: home
},
{
path: '/office',
component: office
},
{
path: '/mine',
component: mine
}
]
},
]
})
登录界面loginPage
登录
export default {
name: "login-page",
data(){
return{
loginInfo:{
userNub:'',
password:'',
}
}
},
methods:{
login(){
this.$router.push({ path: '/mainPage'});
}
}
}
主界面mainPage
export default {
name: "mainPage",
data(){
return{
tabbar:[{
title:"首页",
link:"/home",
active:true,
icon:"home-outline",
},
{
title:"办事大厅",
link:"/office",
active:false,
icon:"shopcart-outline",
},
{
title:"个人中心",
link:"/mine",
active:false,
icon:"ucenter",
}
]
}
},
//监听路由变化切换tab
watch:{
$route(to,from){
for(let i=0;i
if(this.tabbar[i].link===to.path){
this.tabbar[i].active=true;
}else{
this.tabbar[i].active=false;
}
}
}
},
}
office办事大厅 代码
export default {
name: "test-a"
}
其他略。。。，有问题欢迎讨论
