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