關於vue路由的使用及模塊管理

1、引入路由

在生成的main.js中導入2步驟的根目錄，

import router from './router'

然後在創建vue對象的時候放進去

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

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/** 路由組件 */
  }]

當然也可以建立父子路由

首先在父組件的頁面中放入子組件的路由管理<router-view></router-view>

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

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、大功告成，大家有問題可以回覆我或者私信我