Vue-router 4 动态路由后刷新指向404问题

在vue-router4 配置404页面的方式

       

{

          name:'NotFont',

          alias:'/404',

          path: '/:pathMatch(.*)*',

          component: () => import('@/views/404/index.vue'),

          meta: { hidden: true }

        }

如果没有设置动态路由可以直接在router 路由表中直接配置，但是有使用动态路由会导致刷新页面直接跳到404。从其他资源看到可以利用router.removeRoute的方法，先删除在添加动态路由后再通过router.addRoute 添加。但是我的项目中直接死在了第一步，虽然remove方法执行成功了，通过调用router.getRoutes（）也确认了404的路由已经清除，但是页面还是被导航到了404页面，如果通过修改next中的path跳转更会导致路由跳转无限嵌套。

所以推荐判断404路由是否存在，然后再直接通过addRoute在动态路由后添加404路由，这样也不用调用removeRoute 也避免其他意外情况。

 // removeRoute 后仍是刷新访问
     if(!router.hasRoute("NotFont")){
        router.addRoute({
          name:'NotFont',
          alias:'/404',
          path: '/:pathMatch(.*)*',
          component: () => import('@/views/404/index.vue'),
          meta: { hidden: true }
        });
      }