楠丶nan 2021-07-28 17:07 采纳率: 100%
浏览 296
已结题

Vue动态添加路由刷新的问题

最近在研究动态添加路由菜单,菜单添加过滤什么都写好了,就在路由守卫拦截那一块出现了问题。动态路由数据存储在store内,用于判断是否刷新页面,后端拿取的菜单存在cookie内,这是我的代码:

添加路由的代码
export function addUserMenus() {
    let menuList = getTrees(cookie.getJSON('menu'));
    const addRoutes = [];
    let tempList = [];
    menuList.forEach(item1 => {
        tempList = []
        let parent = {
            path: item1.url,
            name: item1.comName,
            component: () => import('@/views/system/' + item1.comName + '.vue')
        }
        let child = {
            path: '',
            name: '',
            component: null
        }
        if (item1.children) {
            item1.children.forEach(item2 => {
                child.path = item2.url;
                child.name = item2.comName;
                child.component = () => import('@/views/system/' + item2.comName + '.vue');
                tempList.push(child);
            })
        }
        if (tempList.length > 0) {
            addRoutes.push(Object.assign({}, parent, {
                children: tempList
            }))
        } else {
            addRoutes.push(parent);
        }
    })
    addRoutes.forEach(item => {
        router.addRoute('Home', item);
    })
    store.commit('setMenuRouter', addRoutes);
    console.info("初始", router.getRoutes())
}

//全局路由拦截
router.beforeEach((to, from, next) => {
    if (to.path == '/login') {
        if (cookie.get('user') != null || cookie.get('menu') != null || cookie.get('token') != null) {
            if (store.getters.getMenuRouter.length === 0) {
                addUserMenus();
            }
            next("/home/info");
        }
        next();
    } else {
        if (cookie.get('user') == null || cookie.get('menu') == null || cookie.get('token') == null) {
            cookie.remove('user');
            cookie.remove('menu');
            cookie.remove('token');
            ElMessage.error("发生异常,请重新登录!");
            next("/login");
        } else {
            if (store.getters.getMenuRouter.length === 0) {
                addUserMenus();
            }
            next();
        }
    }
})

页面一刷新就跳到404,控制台打印显示我路由内有动态添加进去的路由,感觉是动态路由还没添加进静态路由内,就已经next() 放行了,也不太确定是不是这个问题,但是一点击404的返回就能正常浏览页面了,返回按钮是用router.push跳转的。

img

img

  • 写回答

1条回答 默认 最新

  • 楠丶nan 2021-07-29 17:20
    关注

    已解决

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 8月6日
  • 已采纳回答 7月29日
  • 创建了问题 7月28日

悬赏问题

  • ¥20 完全没有学习过GAN,看了CSDN的一篇文章,里面有代码但是完全不知道如何操作
  • ¥15 使用ue5插件narrative时如何切换关卡也保存叙事任务记录
  • ¥20 软件测试决策法疑问求解答
  • ¥15 win11 23H2删除推荐的项目,支持注册表等
  • ¥15 matlab 用yalmip搭建模型,cplex求解,线性化处理的方法
  • ¥15 qt6.6.3 基于百度云的语音识别 不会改
  • ¥15 关于#目标检测#的问题:大概就是类似后台自动检测某下架商品的库存,在他监测到该商品上架并且可以购买的瞬间点击立即购买下单
  • ¥15 神经网络怎么把隐含层变量融合到损失函数中?
  • ¥15 lingo18勾选global solver求解使用的算法
  • ¥15 全部备份安卓app数据包括密码,可以复制到另一手机上运行