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"
}
其他略。。。，有問題歡迎討論
總結
以上是生活随笔為你收集整理的vue 手机端路由切换滑动_vue移动端router-view嵌套实现底部导航切换的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Java多线程--死锁例子
- 下一篇： java 轻量数据库_DBTree是一个