vue3-动态路由问题（由后端返回路由进行拼接）

最新推荐文章于 2025-05-07 08:32:08 发布

小白菜_12138

最新推荐文章于 2025-05-07 08:32:08 发布

阅读量1.2k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： vue-router vue3 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/Define_best/article/details/136165424

因需求和安全性，将前端路由逻辑改为后端发送不同权限路由至前端拼接。介绍了核心代码，分析了页面刷新获取不到动态路由致重定向、首次执行beforeEach重定向到404页面两个问题，并给出解决办法，最终完成动态路由功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于需求和安全性原因，将原来由前端根据用户权限去添加、剔除的路由逻辑改为由后端将不同权限的路由发送至前端进行路由拼接的写法（其实我也不清楚哪里不安全...没有进行注册的路由是无法访问的...如果访问的了只能说明剔除的逻辑写的有问题）但是客户是这么要求的，没办法....😭

一、核心代码（能实现效果，但可以优化）

router.beforeEach((to, from, next) => {
    const userStore = useUserStore()
    const usePermissionStore = useUserPermissionStore()
    if (to.path !== '/login') {
        if (userStore.getToken) {
            const isExist = router.hasRoute(to.name!)
            // 用于解决动态路由刷新白屏问题
            if (!isExist) {
                usePermissionStore.getDynamicRoutes.forEach(item => {
                    item.component = () => import(`@/layout/index.vue`)
                    if (item.children.length > 0) {
                        item.children.forEach((items: any) => {