vue-router重定向 不刷新问题

时间：2022-04-23 19:56:09

　　前阵子太忙了，自己一个人一边开发着新项目，一边维护着旧项目，没时间写博客，终于让我腾出时间了。废话少说，开始正文。

　问题描述:

　　之前项目是angular开发的，后来用vue重构后。项目路径和vue路径不一致，但是app端分享出的链接，依旧是旧项目链接。

　解决方法：

　　通过阅读vue-router的官方文档，发现重定向可以解决这个问题。

　　如之前文件路径是'/live/detail/id=7234'，'/skill/microList/',新项目路径是'/s/live/detail?id=7234','/s/live/list'

{path: '/live/list(/)?:foo', redirect: '/s/live/list'},

{path: '/s/live/list', meta: {keepAlive:true,title: '课程'}, component: resolve => require(['../pages/s/live/list/Index.vue'], resolve)},

{path: '/live/detail(/)?:id', redirect: '/s/live/detail?:id'},

{path: '/s/live/detail', meta: {title: '课程详情'}, component: resolve => require(['../pages/s/live/detail/Index.vue'], resolve)},

　新的问题：　　

　　本来以为重定向就万事大吉了，结果发版后，有用户反馈是空白页面。我仔细看了路径没问题啊，顺直一点点排查，发现重定向成功了，但是页面没刷新

　解决方法：

　　通过仔细观察，重定向的过程，发现会先执行旧路由，再进行重定向，那么可以统一配置旧路径，让其刷新。router中

  {path: '*',meta:{title: '学部'}, component: resolve => require(['../pages/NotFound/Index.vue'], resolve)},

　　 使用通配符，让之前没有写路径规则的页面，统一跳转到一个新的页面，让再新页面判断是否是重定向过来的。NotFound页面的代码

    beforeRouteEnter(to,from,next){

      next(vm => {

        console.warn(to.redirectedFrom)

        if(to.redirectedFrom){//vue-router redirect不会刷新页面，需要判断并刷新

          // vm.$router.go(0)//safari浏览器go(0)无效

          window.location.reload()

        }

      })

    },

　　重定向的页面会有redirectedFrom这个属性，然后让其刷新即可。

相关文章