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