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()
})
---------------------