Vue：项目-动态路由以及坑（完整代码）

注意的细节 - 坑很大

//1. 重定向至未注册的路由节点name
会报错，因为进去路由前置beforeEach的to参数，必须含有fullpath，否则进不去，没有定义路由节点的name，这就表明拿不到路径，就会一直报错

//1. 重定向至未注册的路由节点path
可以进去路由前置beforeEach，从而做动态路由的添加、增删操作

//看不懂我说啥，直接看下面的代码的注释即可

const routes = [
    //首页
    {
        path: '/',
        name: 'IndexPage',
        //redirect: {name: 'GenerateShortLinkPage'} ,  //不要这样写，由于GenerateShortLinkPage这个节点的路由不存在，拿不到对应重定向的地址，故会报错
        redirect: '/short-chain' ,  //重定向，不会报错即使你现在这个/short-chain路由节点未定义。但是到时也可以进去路由前置beforeEach，从而做动态路由的增添
        meta: {
        }
    },
]

const myRouter = VueRouter.createRouter({
    // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
    history: VueRouter.createWebHashHistory(),
    routes, // `routes: routes` 的缩写
})

 

完整代码

路由节点的获取到时可以直接换成请求后台接口数据即可，我现在代码的动态路由节点是写死的
 
官网： https://router.vuejs.org/zh/guide/advanced/dynamic-routing.html#%E5%9C%A8%E5%AF%BC%E8%88%AA%E5%AE%88%E5%8D%AB%E4%B8%AD%E6%B7%BB%E5%8A%A0%E8%B7%AF%E7%94%B1

//待添加的路由数据
var menuDatas = [
            {
                id: 1,
                level: 1,
                name: '工具库',
                sort: 1,
                menuIcon: 'location',
                childrens: [
                    {
                        parentId: 1,
                        level: 2,
                        id: 4,
                        name: '图床',
                        sort: 1,
                        routerPath: '/figure-bed',
                        routerName: 'FigureBedPage',
                        routerComponent: 'FigureBedPage'
                    },
                    {
                        parentId: 1,
                        level: 2,
                        id: 5,
                        name: '短链生成器',
                        sort: 1,
                        routerPath: '/short-chain',
                        routerName: 'GenerateShortLinkPage',
                        routerComponent: 'GenerateShortLinkPage'
                    },
                    {
                        parentId: 1,
                        level: 2,
                        id: 6,
                        name: '代码生成器',
                        sort: 1,
                        routerPath: '/generate-code',
                        routerName: 'GenerateCodePage',
                        routerComponent: 'GenerateCodePage'
                    },
                ]
            },
            {
                id: 2,
                level: 1,
                name: '社交',
                sort: 2,
                menuIcon: 'icon-menu',
                childrens: []
            }
            ,
            {
                id: 3,
                level: 1,
                name: '系统设置',
                sort: 3,
                menuIcon: 'setting',
                childrens: [
                    {
                        parentId: 3,
                        level: 2,
                        id: 8,
                        name: '系统更新历程',
                        sort: 1,
                        routerPath: '/update-timeline',
                        routerName: 'UpdateTimelinePage',
                        routerComponent: 'UpdateTimelinePage'
                    },
                ]
            }
        ]



//注册路由
function registerRoute(menuDataList, router) {

    if(!router || (menuDataList && menuDataList.length <= 0)) {return;}

    menuDataList.forEach((menuDataElem) => {


        var registerRouteInfo = {
            path: menuDataElem.routerPath,
            name: menuDataElem.routerName,
            component: window[menuDataElem.routerComponent]
        }


        if (menuDataElem.routerName && !router.hasRoute(menuDataElem.routerName)) {
            let parentRouteName = menuDataElem.parentRouteName;
            if(strIsEmpty(parentRouteName)) {
                console.log("路由正在注册（普通路由）：", menuDataElem,registerRouteInfo)
                router.addRoute(registerRouteInfo)
            }else {
                console.log("路由正在注册（子路由）：", menuDataElem,registerRouteInfo)
                router.addRoute(parentRouteName,registerRouteInfo)
            }
        }else if (menuDataElem.routerName) {
            console.log("路由已存在：", menuDataElem,registerRouteInfo)
        }

        //子路由注册
        if (menuDataElem.childrens && menuDataElem.childrens.length > 0) {
            registerRoute(menuDataElem.childrens,router)
        }
    })
}


//是否存有路由
function existRoutePath(path, routes) {
    let findIndex = routes.findIndex((route => {
        return route.path == path;
    }))
    return findIndex > 0 ? true :false;
}



//路由注册
myRouter.beforeEach((to, from) => {
    if(!existRoutePath(to.fullPath, myRouter.getRoutes())) {
        registerRoute(menuDatas, myRouter)
        console.log("所有路由信息：", myRouter.getRoutes())
        //前面注册完，再次检测是否存有，没有，说明没权限访问的路由页面
        if(existRoutePath(to.fullPath,myRouter.getRoutes())) {
            return to.fullPath
        }else {
            return 'not-permissions-page'
        }
    }
})