关于vue路由的使用及模块管理

1、引入路由

在生成的main.js中导入2步骤的根目录，

import router from './router'

然后在创建vue对象的时候放进去

new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

2、在src目录下创建router目录，创建index.js,目录结构如下

3、在index.js中引入vue和router

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
})

4、创建某个模块的路由，新建目录audit，在目录下创建auditRouter.js，结构如下

auditRouter.js引入页面路径和部署路由

import audit from '../../components/audit/audit' /** 引入组件路径 */
export default [
  {
    path: '/audit', /** 路由地址 */
    name: 'audit', /** 路由名称 */
    component: audit/** 路由组件 */
  }]

当然也可以建立父子路由

首先在父组件的页面中放入子组件的路由管理

其次在父组件的路由管理中引入子组件，例如

path: '/manageSys',
name: manageSys,
component: manageSys,
children: [
  {
    path: 'accredit',
    name: 'accredit',
    component: accredit
  }
]

5、将模块引入index.js

import Vue from 'vue'
import Router from 'vue-router'
import auditRouter from './audit/auditRouter'

Vue.use(Router)

export default new Router({
  routes: [
    ...auditRouter
  ]
})

6、大功告成，大家有问题可以回复我或者私信我