路由使用 vue-router
組件庫使用 vue-ydui
效果圖：

登錄.png

主界面-首頁.png

主界面-辦事大廳.png

項(xiàng)目結(jié)構(gòu)

圖片.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',//子路由默認(rèn)加載第一個(gè)界面
      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="請(qǐng)輸入用戶名"></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="請(qǐng)輸入密碼"></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:"個(gè)人中心",
                link:"/mine",
                active:false,
                icon:"ucenter",
              }
            ]
          }
        },
      //監(jiān)聽路由變化切換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>

其他略。。。，有問題歡迎討論