前言
創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設,安陸企業(yè)網(wǎng)站建設,安陸品牌網(wǎng)站建設,網(wǎng)站定制,安陸網(wǎng)站建設報價,網(wǎng)絡營銷,網(wǎng)絡優(yōu)化,安陸網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。
企業(yè)運營后臺頁面很多，路由如若不區(qū)分模塊化配置，所有路由擠在同一個文件將不好維護，所以路由的配置也要模塊化
分享兩個解決方案 —— Vue 路由配置的模塊化（Plan A and Plan B）
注冊需要
首先路由注冊需要啥
重慶分公司
重慶分公司
// main.js
new Vue({
el: '#app',
router,
store,
components: { App },
template: '也就是說注冊需要 new 一個 Router 實例，實例里的 routes 是數(shù)組，里面配置每個頁面的路由
模塊拆分（Plan A）
src 下 router 的目錄結構
---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')
})
}如有其他模塊，依次像上面一樣配置
關鍵是路由配置入口出口文件 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)
// 如有多個模塊，依次在這里配置
const router = new Router({
mode: 'history',
routes: routes.concat([rootRouter, redirectRouter])
})
export default router上述代碼，除了 other，所有頁面路由配置在 rootRouter 的 children 下面，有一個父級 router 包裹著
代碼都看得懂，這里就不多說哈~
最后在 main.js 中注冊
模塊拆分（Plan B）
該方法較為難懂一些，可以看看
目錄結構跟 Plan A 類似，不過在 src 下多了一個 router.js 配置文件作為路由出口文件
src 下 router 的目錄結構
---src
----router
------modules
--------xxxx.js // 模塊 xxx
--------other.js // 模塊 other
------index.js // 路由配置中轉文件
----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() // 進入該路由前異步請求，結束后進入該路由
next()
}
},
{
path: 'order-detail',
component: () => import('@/views/orderManagement/Detail')
},
// 下面是重定向，可不配置
{
path: 'orderDetail',
redirect: 'order-detail'
},
{
path: 'order',
redirect: 'order-list'
}
]
}
]
export default OrderRouter上述路由配置在 Layouts 路由下的 children
接下來關鍵，路由配置中轉文件 index.js
遍歷 modules 文件夾下的每個模塊文件，賦值和導出
// 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
// 轉為駝峰命名
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 中注冊
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對創(chuàng)新互聯(lián)的支持。
