1.问题
- 动态添加路由之后,页面重新匹配路由,匹配到了设置的404 notfound页面
- 该页面是在路径无法匹配到的时候才会跳转的页面
2. 问题查找
- 在前置路由守卫打印to
- 发现当前地址匹配到的组件是配置的404页面
- 并且此时的动态路由中是含有改路由地址的
3.问题原因
- 在页面刷新时,会重新初始化vuex中的state数据,并动态添加路由
- 由于先安装加载路由,后添加动态路由
- 此时,流程是:刷新页面 => 代码自上而下执行安装路由 => 路由会立即匹配组件 => 此时还未添加动态路由 => 匹配不到对应的组件 => 最终匹配到 notfound
4.解决办法
- 调整添加动态路由时机
- 代码执行有先后,执行顺序的不同可能会导致不同的结果
