当前位置 博文首页 > 文章内容

    Vue项目中使用addRoutes出现问题的解决方法

    作者:shunshunshun18 栏目:未分类 时间:2021-08-30 14:41:55

    本站于2023年9月4日。收到“大连君*****咨询有限公司”通知
    说我们IIS7站长博客,有一篇博文用了他们的图片。
    要求我们给他们一张图片6000元。要不然法院告我们

    为避免不必要的麻烦,IIS7站长博客,全站内容图片下架、并积极应诉
    博文内容全部不再显示,请需要相关资讯的站长朋友到必应搜索。谢谢!

    另祝:版权碰瓷诈骗团伙,早日弃暗投明。

    相关新闻:借版权之名、行诈骗之实,周某因犯诈骗罪被判处有期徒刑十一年六个月

    叹!百花齐放的时代,渐行渐远!



    前言

    addRoutes官方介绍:

    函数签名:

    router.addRoutes(routes: Array<RouteConfig>)

    动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组。

    这两天做vue后台权限管理系统的时候,发现使用vue提供的addRoute添加路由以后,会出现两个bug,一起来看看如何解决吧~

    一、404页面

    1. 出现的原因

    使用vue提供的addRoutes添加了动态路由以后,404页面的路由设置不在路由的末尾了

    2. 解决方案

    将404页面的路由添加到动态路由的末尾

    代码如下(示例):

    // xxx => 用户有的动态路由数组
    xxx.push({ path: '*', redirect: '/404', hidden: true })
    
    // 动态添加路由配置
    router.addRoutes(xxx)
    

    二、刷新白屏

    1. 出现原因

    刷新时,动态路由没有加载完毕

    2. 解决方案

    路由添加完毕后,在进入页面

    代码如下(示例):

    if(用户的动态路由没有加载){
    	// 解决刷新出现的白屏bug
      next({
        ...to, // next({ ...to })的目的,是保证路由添加完了再进入页面 (可以理解为重进一次)
        replace: true // 重进一次, 不保留重复历史
      })
    } else {
    	next()
    }
    

    三、路由重复

    1.  出现原因

    路由设置是通过router.addRoutes(xxx)来添加的,退出时,并没有清空,再次登陆,又加了一次,所以有重复。

    2. 解决方案

    代码如下(示例):

    // 重置路由
    export function resetRouter() {
      const newRouter = createRouter()
      router.matcher = newRouter.matcher // 重新设置路由的可匹配路径
    }
    

    这个方法就是将路由重新实例化,相当于换了一个新的路由,之前加的路由就不存在了,需要在登出的时候, 调用一下即可。

    总结