vue 解决addRoutes动态添加路由后刷新失效问题(跳转“404”页面)

这篇文章主要介绍了vue 解决addRoutes动态添加路由后刷新失效问题，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

前言

某些场景下我们需要利用addRoutes动态添加路由，但是刷新后就会失效，前段时间项目里刚好遇到了这个应用场景，所以就花时间研究了一下，做下分享跟记录，说的不对的地方，请大家指正。

应用场景：用户a登录进系统，用户挑选店铺后跳转到店铺详情首页，进入到动态添加的路由页面后，如果这个刷新页面或者更改地址栏，你会发现用户会跳到404页面。（因为我在路由配置全局匹配404路由如下）

{path: '*',redirect: '/404',hidden: true},
{path: '/404',name: "404",component: () => import('@/views/errorPage/404'),hidden: true},
{path: '/401',name: "401",component: () => import('@/views/errorPage/401'),	hidden: true},

根据路由配置，如果路由没有找到强匹配的地址，就会选择重定向“/404”

问题展示

思路

1.用户点击按钮，用addRutes动态添加路由并跳转，并把路由保存;
2.用户在新跳转的页面，刷新时暂存刷新的页面，利用beforeEach进行拦截判断，如果发现之前有保存路由路径，并且判断新页面只是刷新事件，再将之前保存的路由添加进来;

实现

在App.vue中添加一些js代码保存刷新时的路径

//vue的调用钩子函数
created () {
  this.routeUpdate(this.$route);
},
//监听路由更变
watch: {
  '$route': 'routeUpdate'
},
methods: {
    routeUpdate (to) {
      if (to.name) {
        this.menuShow = to.meta.menu === undefined || to.meta.menu
        this.localLoginUser()
      }
      this.loadShopInfo()
      this.loadRoutesInfo()