vue 项目加载完成后如何实现动态修改路由？

Question

场景：在系统的权限设置页面修改后，能直接更新动态路由。

注意是站点加载完成后，通过前端操作修改路由（现在比较难弄的是替换目标路由）

Answer 1

Part 1（包装一下addRoutes方法）

const createRouter = () => new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: constantRouterMap,
})

const router = createRouter()

router.$addRoutes = (routes) => {
    router.matcher = createRouter().matcher
    router.addRoutes(routes)
}

Part 2（cloneDeep(asyncRouterMap)）

import { asyncRouterMap } from '@/config/router.config'
import cloneDeep from 'lodash/cloneDeep'

function filterAsyncRouter (routerMap, permission) {
    const accessedRouters = cloneDeep(routerMap).filter(route => {
        //to do
    })
    return accessedRouters
}

const accessedRouters = filterAsyncRouter(asyncRouterMap, [获取的权限配置])
router.$addRoutes(accessedRouters)

Answer 2

router.addRoutes方法

Answer 3

我是生成路由时加了标记，在系统设置页面增加新页面时重置标记为false,点击跳转时重新加载路由