vue 手机端路由切换滑动_vue移动端router-view嵌套实现底部导航切换

路由使用 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"

}

其他略。。。，有问题欢迎讨论