vue3中动态添加路由刷新无法正确匹配路由组件

1.问题

• 动态添加路由之后,页面重新匹配路由,匹配到了设置的404 notfound页面
• 该页面是在路径无法匹配到的时候才会跳转的页面

2. 问题查找

• 在前置路由守卫打印to
• 发现当前地址匹配到的组件是配置的404页面

• 并且此时的动态路由中是含有改路由地址的

  
  image.png
  image.png

3.问题原因

• 在页面刷新时,会重新初始化vuex中的state数据,并动态添加路由

  
  image.png
• 由于先安装加载路由,后添加动态路由
• 此时,流程是:刷新页面 => 代码自上而下执行安装路由 => 路由会立即匹配组件 => 此时还未添加动态路由 => 匹配不到对应的组件 => 最终匹配到 notfound

4.解决办法

• 调整添加动态路由时机

• 代码执行有先后,执行顺序的不同可能会导致不同的结果

  
  image.png