關於vue3中動態路由的配置

1.目錄結構

 

 

 2.分析

---

 

index中放置路由的基本配置

import { createRouter, createWebHashHistory } from 'vue-router'
import routes from './routes'
const router = createRouter({
    // hash模式
    history: createWebHashHistory(),
    routes
})
export default router

---

routes.js中放置配置的靜態路由

如果在權限配置中路由全是通過接口得到，那可以不需要這個

如果部分路由放置在本地，然后根據不同角色權限手動添加一些路由，可以這樣拆分

const routes = [
    {
        path: '/',
        name: 'Home',
        // component: Home
        component: () => import('../pages/Home/index.vue')
    }
]
export default routes

---

promission.js中放置對路由的處理邏輯

// 引入路由
import router from './index.js'
import routes from './routes.js'
// 引入第三方插件 進度條
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

// 動態路由的配置
let getRouter;
router.beforeEach((to, from, next) => {
    NProgress.start()
　　// 在具體的項目中還涉及到跳轉登錄、用戶session信息等，需要處理更詳細些，否則會有死循環 if (!getRouter) {
        // 沒有路有，先拿到動態路由
 getRouter = handleRoutes(routes)  routerGo(to, next)
        NProgress.done()
    } else {
        next()
        NProgress.done()
    }
})
router.afterEach(() => {
    NProgress.done()
})

---

涉及到的方法：

1：handleRoutes

這里只是個例子，終究就是說：如果這個角色有權限，那么就向原路由中添加新的路由，該方法以原路由作為參數

function handleRoutes(menuList) {
    if (!menuList || menuList.length === 0) {
        return false
    }
    let whiteList = ['55555', '12']
    let userId = localStorage.getItem('wx')
    for (let i in whiteList) {
        if (whiteList[i] === userId) {
　　　　　　// 按照自己項目邏輯做不同的處理
 menuList.push({ path: '/tem', name: 'Tem', component: () => import('../pages/Tem/index.vue') }) break
        }
    }
    return [...menuList]
}

2. routerGo

經過handleRoutes處理之后，拿到的是一個最終路由格式的數組

 

 

 接下來需要將數組中的內容處理成路由格式：

比如路由中有這樣的配置寫法，無論是寫在本地的還是接口獲取的，那么在handleRoutes中它只是一個字符串而已

 

 

 此時通過filterAsyncRouter方法進行處理，將添加完新路由的路由格式的數組傳給該方法，依次處理其中的component

function filterAsyncRouter(RouterMap) {
    const accessedRouters = RouterMap.filter(route => {
        route.component = _import(route.name) return true
    })
    return accessedRouters
}

在本地開發和在生產環境需要按需加載路由，使用不同的方法

本地：

module.exports = fileanme => require('../pages/' + fileanme).default

生產：

module.exports = fileanme => () => import('../pages/' + fileanme)

處理完畢，對該路由對象執行routerGo方法   調用router的addRoute 方法動態添加路由

vue3 addRoute  一次添加一個路由，可以嵌套子路由  （對象）

所以需要對filterAsyncRouter處理的結果  依次調用addRoute

vue2 addRoutes  把整個路由添加進去 （數組）router.addRoutes(getRouter)

function routerGo(to, next) {
    getRouter = filterAsyncRouter(getRouter)
 getRouter.forEach((val, idx) => { router.addRoute(val) })
    next({
        ...to,
        replace: true
    })
}

注意： next（）接收參數的時候表示中斷當前導航，執行新的導航