关于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（）接收参数的时候表示中断当前导航，执行新的导航