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

<template>
  <div>
    <yd-navbar fontsize="14px" height="50px" bgcolor="#2c83db" color='#FFF' title="登录"></yd-navbar>
    <yd-cell-group style="margin-top: 50px">
      <yd-cell-item>
        <yd-icon slot="icon" name="phone3" size=".45rem"></yd-icon>
        <yd-input slot="right" required v-model="loginInfo.userNub" max="20" placeholder="请输入用户名"></yd-input>
      </yd-cell-item>
      <yd-cell-item>
        <yd-icon slot="icon" name="phone3" size=".45rem"></yd-icon>
        <yd-input slot="right" required v-model="loginInfo.password" max="20" placeholder="请输入密码"></yd-input>
      </yd-cell-item>
    </yd-cell-group>
    <yd-button-group>
    <yd-button size="large"  bgcolor="#2c83db" color='#FFF' @click.native="login">登录</yd-button>
    </yd-button-group>
  </div>
</template>

<script>
    export default {
        name: "login-page",
        data(){
          return{
            loginInfo:{
              userNub:'',
              password:'',
            }
          }
        },
      methods:{
          login(){
            this.$router.push({ path: '/mainPage'});
          }
      }
    }
</script>

<style scoped>

</style>

主界面mainPage

<template>
  <div>
    <router-view/>
    <yd-tabbar  style="position: fixed;bottom: 0">
      <yd-tabbar-item v-for="(tab,index) in tabbar" :title="tab.title" :link="tab.link" :active="tab.active" :key="index">
        <yd-icon :name="tab.icon" slot="icon" size="0.54rem"></yd-icon>
      </yd-tabbar-item>
    </yd-tabbar>
  </div>
</template>
<script>
    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<this.tabbar.length;i++){
            if(this.tabbar[i].link===to.path){
              this.tabbar[i].active=true;
            }else{
              this.tabbar[i].active=false;
            }
          }
        }
      },
    }
</script>

<style scoped>

</style>

office办事大厅 代码

<template>
   <div>
     <yd-navbar  title="办事大厅" fontsize="14px" height=50px bgcolor="#2c83db" color='#FFF'></yd-navbar>
   </div>
</template>

<script>
    export default {
        name: "test-a"
    }
</script>

<style scoped>

</style>

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