Vue-router：路由嵌套及index.js 文件拆分

1. Vue-router

Vue-router 是爲了配合Vue.js 構建單頁面應用而存在的，在使用方面，咱們須要作的是，將組件映射到路由，而後告訴Vue-router 在哪裏渲染它們。具體教程請移步：https://router.vuejs.org/zh-cn/essentials/getting-started.html. 由於文檔中對於嵌套路由的描述不是特別契合應用場景，因此這裏從新梳理一番，並對router文件夾下的index.js 文件進行拆分，實現簡單的功能解耦。

2. 路由和路由嵌套

路由的意義就在於咱們能夠保持頁面一部分固定而只改變頁面的剩餘部分，路由嵌套的存在則是由於咱們須要根據應用場景提供不一樣粒度的路由，聽起來有點抽象，直接來看圖。

 

 

以上圖爲例，三個顏色的框分別表明了三個不一樣粒度的路由（三層路由嵌套）。紅色框存在的緣由是須要區分是登陸頁面，仍是操做頁面。綠色框的存在是由於不一樣管理模塊的左邊菜單欄內容和按鈕不一致，因此這一塊也須要是可變的。黃色框則是在一個管理模塊內根據不一樣的菜單選擇而展示不一樣的內容。

3. 怎麼實現路由嵌套

3.1 入口文件（App.vue）

由於須要三層嵌套路由，最外層路由的大小是整個頁面，因此網站的入口文件是一個只包含router-view 的div

<template>
<div id="app">
<router-view/>
</div>
</template>

<script>
export default {
name: 'App'
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
html,body
width 100%
height 100%
#app
width 100%
height 100%
font-family 'Avenir', Helvetica, Arial, sans-serif
-webkit-font-smoothing antialiased
-moz-osx-font-smoothing grayscale
color #2c3e50
</style>

 

3.2 二級路由（Main.vue）

二級路由是除了頂部導航欄之外的部分，只有頂部導航欄是固定的，其餘部分都是可變的。

<template>
  <div class="main">
    <NavBar></NavBar>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'Main'
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
</style>

 

 

3.3 三級路由（不一樣模塊的左邊菜單欄能夠是不一樣的）

三級路由在二級路由的基礎上再固定左邊菜單欄。此時，頂部導航欄和左邊菜單欄都是固定的，剩餘內容是可變的。

<template>
  <div>
    <SideBar :sideBar="sideBar"></SideBar>
    <router-view></router-view>
  </div>
</template>

<script type="text/ecmascript-6">
import sbJson from '@/assets/json/SideBarJson.json'

export default {
  name: 'EmployeeManagement',
  data () {
    return {
      sideBar: {
        options: sbJson.employee
      }
    }
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../assets/css/commonCss.styl"
</style>

 

3.4 router文件夾下的index.js 寫法

main.js 寫法就不貼了，保持跟官方一直便可。index.js 寫法以下所示：

引入各級路由頁面或組件

import Main from '../Main.vue'
import Login from '../login.vue'

// user management
import WholeManagement from '@/pages/UserManagement/WholeManagement/WholeManagement'
// 如下省略不少組件

 

建立新的VueRouter 對象，按照如下寫法，當路由爲/user/condition 時就會訪問到WholeManagement 頁面了，固然也能夠繼續進行更深層次的嵌套。

const router = new VueRouter({
  routes: [
    {
      path: '/user',
      name: 'user',
      title: '老人管理',
      meta: {
        title: '老人管理'
      },
      component: Main,
      children: [
        {
          path: 'condition',
          name: 'WholeManagement',
          meta: {
            title: '老人狀況一覽'
          },
          title: '狀況一覽',
          component: WholeManagement
        }
      ]
    }
  ]
})

 

4. 如何將index.js 拆分

若是頁面比較多的話，路由文件內容會不少，有時除了路由之外還須要在index.js 中添加部分邏輯。這時仍是將路由跟跟邏輯分開寫更清晰一點。因而index.js 被拆分紅index.js 和router.js 兩個文件，router.js 中存放路由，index.js 中存放邏輯。

router.js

import Main from '../Main.vue'
import Login from '../login.vue'

// user management
import WholeManagement from '@/pages/UserManagement/WholeManagement/WholeManagement'
// import a lot of vue files

// 登陸頁面單獨寫，以下
export const loginRouter = {
  path: '/login',
  name: 'login',
  meta: {
    title: 'Login - 登陸'
  },
  component: Login
}

// 做爲Main組件的子頁面展現而且在左側菜單顯示的路由寫在appRouter裏
export const appRouter = [
  // 默認頁面
  {
    path: '/',
    redirect: '/user/condition'
  },
  // 老人管理
  {
    path: '/user',
    name: 'user',
    title: '老人管理',
    meta: {
      title: '老人管理'
    },
    component: Main,
    children: [
      {
        path: 'condition',
        name: 'WholeManagement',
        meta: {
          title: '老人狀況一覽'
        },
        title: '狀況一覽',
        component: WholeManagement
      },
      // ......
    ]
  },
  // 物資管理
  {
    path: '/material',
    name: '',
    component: Main,
    children: [
      {
        path: '',
        name: 'material',
        component: MaterialManagement,
        children: [
          {
            path: 'drug/list',
            name: 'DrugList',
            meta: {
              title: '藥品列表'
            },
            component: DrugList
          },
          // ......
        ]
      }
    ]
  },
  // ......
]

// 全部上面定義的路由都要寫在下面的routers裏
export const routers = [
  loginRouter,
  ...appRouter
  // ......
]

 

index.js

import Vue from 'vue'
import { routers } from './router'
import VueRouter from 'vue-router'

// 使用VueRouter
Vue.use(VueRouter)

// 路由配置
const RouterConfig = {
routes: routers
}

// 建立VueRouter 實例
export const router = new VueRouter(RouterConfig)

// 設置頁面title
router.beforeEach((to, from, next) => {
/* 路由發生變化修改頁面title */
if (to.meta.title) {
document.title = to.meta.title
}
next()
})
---------------------