vue3动态路由页面刷新丢失路由

话不多说直接演示

如果不会配置动态路由可以看我前一篇文章vue3配置动态路由https://blog.youkuaiyun.com/qq_46596540/article/details/144417988

 

 

建议测试前先把404页面注释掉，要不然老是跳404

如果配置完动态路由之后 点击左侧导航栏肯定没有问题，但是一刷新就白屏了或者跳到自己配的404 

首先搞清楚执行顺序，下面是main.js的打印和路由守卫的打印

可以看到main.js在守卫之前执行

 

看到这张图 你会怎么做？？

那肯定在main.js里面配啦，首先用你的状态管理器，vuex或者pinia

 我是在pinia里面写了一个方法，调用这方法的时候

 把自己的子路由添加进来定义的数组里

重点：：app.use(pinia)一定要提前挂载，否则会报错

然后导入自己定义的模块 

 

也是重点：这个routerslist这个函数

必须要在路由挂载前使用 要不然也会出错。