快捷導(dǎo)航

Vue路由模塊化配置的完整步驟

更新時(shí)間：2019年08月14日 09:22:42 作者：Krryblog

這篇文章主要給大家介紹了關(guān)于Vue路由模塊化配置的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

企業(yè)運(yùn)營(yíng)后臺(tái)頁(yè)面很多，路由如若不區(qū)分模塊化配置，所有路由擠在同一個(gè)文件將不好維護(hù)，所以路由的配置也要模塊化

分享兩個(gè)解決方案 —— Vue 路由配置的模塊化（Plan A and Plan B）

注冊(cè)需要

首先路由注冊(cè)需要啥

// main.js

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

// 這里的 router 是這樣的
export default new Router({
 mode: 'history',
 routes: [],
 ... // 其他配置
})

也就是說(shuō)注冊(cè)需要 new 一個(gè) Router 實(shí)例，實(shí)例里的 routes 是數(shù)組，里面配置每個(gè)頁(yè)面的路由

模塊拆分（Plan A）

src 下 router 的目錄結(jié)構(gòu)

---src
----router
------modules
--------xxxx.js // 模塊 xxx
--------other.js // 模塊 other
------index.js // 路由配置入口和出口 index

例如

然后配置 modules 里面模塊路由

// 配置 other
import err from '@/views/others/Error.vue'
export default function(router) {
 router.push({
  path: '/error',
  name: 'error',
  component: err
 })
}

// 配置 accoutReport
export default function(router) {
 router.push({
  path: '/accout-report',
  redirect: '/accout-report/list'
 })
 // 列表
 router.push({
  path: '/accout-report/list',
  name: 'list',
  component: () => import('@/views/accoutReport/List.vue')
 })
 // 新增
 router.push({
  path: '/accout-report/create',
  name: 'create',
  component: () => import('@/views/accoutReport/Create.vue')
 })
 // 編輯
 router.push({
  path: '/accout-report/edit/:id',
  name: 'edit',
  component: () => import('@/views/accoutReport/steps/CreateStep2.vue')
 })
 // 詳情
 router.push({
  path: '/accout-report/detail/:id',
  name: 'detail',
  component: () => import('@/views/accoutReport/Detail.vue')
 })
}

如有其他模塊，依次像上面一樣配置

關(guān)鍵是路由配置入口出口文件 index.js

// index.js
import Vue from 'vue'
import Router from 'vue-router'
import App from '@/views/Layouts.vue'
import otherRouter from '@/router/modules/others'
import accoutReport from '@/router/modules/accoutReport'
// import store from '@/stores'
Vue.use(Router)

let routes = []

let rootRouter = {
 path: '/',
 component: App,
 children: [],
 redirect: '/accout-report/list'
}

let redirectRouter = {
 path: '*',
 redirect: '/error'
}

otherRouter(rootRouter.children)
accoutReport(rootRouter.children)
// 如有多個(gè)模塊，依次在這里配置

const router = new Router({
 mode: 'history',
 routes: routes.concat([rootRouter, redirectRouter])
})
export default router

上述代碼，除了 other，所有頁(yè)面路由配置在 rootRouter 的 children 下面，有一個(gè)父級(jí) router 包裹著
代碼都看得懂，這里就不多說(shuō)哈~

最后在 main.js 中注冊(cè)

模塊拆分（Plan B）

該方法較為難懂一些，可以看看

目錄結(jié)構(gòu)跟 Plan A 類(lèi)似，不過(guò)在 src 下多了一個(gè) router.js 配置文件作為路由出口文件

src 下 router 的目錄結(jié)構(gòu)

---src
----router
------modules
--------xxxx.js // 模塊 xxx
--------other.js // 模塊 other
------index.js // 路由配置中轉(zhuǎn)文件
----router.js // 路由配置出口文件

例如

模塊 modules 里文件配置

// order.js
import { getFindBusinessServiceList } from '@/utils/config-utils'

const OrderRouter = [
 {
  path: '/',
  redirect: '/cost/order-list'
 },
 {
  path: '/cost',
  component: () => import('@/views/Layouts'),
  redirect: '/cost/order-list',
  children: [
   {
    path: 'order-list',
    component: () => import('@/views/orderManagement/List'),
    beforeEnter: async (to, from, next) => {
     await getFindBusinessServiceList() // 進(jìn)入該路由前異步請(qǐng)求，結(jié)束后進(jìn)入該路由
     next()
    }
   },
   {
    path: 'order-detail',
    component: () => import('@/views/orderManagement/Detail')
   },
   // 下面是重定向，可不配置
   {
    path: 'orderDetail',
    redirect: 'order-detail'
   },
   {
    path: 'order',
    redirect: 'order-list'
   }
  ]
 }
]
export default OrderRouter

上述路由配置在 Layouts 路由下的 children

接下來(lái)關(guān)鍵，路由配置中轉(zhuǎn)文件 index.js

遍歷 modules 文件夾下的每個(gè)模塊文件，賦值和導(dǎo)出

// index.js
import { camelCase } from 'lodash-es'
const requiredModules = require.context('./modules', false, /\.js$/)
const routers = {}

requiredModules.keys().forEach(fileName => {
 // 不加載index.js
 if (fileName === './index.js') return
 // 轉(zhuǎn)為駝峰命名
 const moduleName = camelCase(fileName.replace(/(\.\/|\.js)/g, ''))

 routers[moduleName] =
  requiredModules(fileName).default || requiredModules(fileName)
})
export default routers

然后在 src 下的出口文件 router.js 包裝

// router.js
import Vue from 'vue'
import Router from 'vue-router'
import routers from '@/routers/index'
Vue.use(Router)
let routes = []
Object.values(routers).forEach(router => {
 routes.push(...router)
})

export default new Router({
 mode: 'history',
 routes
})

最后在 main.js 中注冊(cè)

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章: