美文网首页
vue3中动态添加路由刷新无法正确匹配路由组件

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

作者: storyWrite | 来源:发表于2021-11-07 11:56 被阅读0次

1.问题

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

2. 问题查找

  • 在前置路由守卫打印to
  • 发现当前地址匹配到的组件是配置的404页面
  • 并且此时的动态路由中是含有改路由地址的


    image.png
    image.png

3.问题原因

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


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

4.解决办法

  • 调整添加动态路由时机
  • 代码执行有先后,执行顺序的不同可能会导致不同的结果


    image.png

相关文章

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

    1.问题 动态添加路由之后,页面重新匹配路由,匹配到了设置的404 notfound页面 该页面是在路径无法匹配到...

  • vue全家桶(2.5)

    3.8.动态路由匹配和路由组件传参 #3.8.1.动态路由匹配 动态路由意味着不固定,具有某种模式,我们希望通过某...

  • Vue路由

    配置路由文件 index.js 路由文件注入到main.js文件中 组件中配置路由跳转 嵌套路由 动态路由匹配 一...

  • Vue动态路由:登录后首次点击侧边栏,显示白屏,手动刷新后能正常

    问题:Vue动态路由:登录后首次点击侧边栏,显示白屏,手动刷新后能正常跳转 原因:当前路径没有匹配动态路由,路由缓...

  • Router

    路由 动态路由匹配 我们经常需要把某种模式匹配到的所有路由,全部映射到同一个组件,例如我们有一个user组件用来展...

  • vue-router

    动态路由匹配 使用动态路由匹配时,原本的组件会被复用,因而不会调用生命周期钩子函数。可用watch观察$rou...

  • 温故而知新之Vue Router

    动态路由匹配 this.$route.params 响应路由参数的变化 路由跳转时,原来的组件实例会被复用,这意味...

  • 前端笔记 — VueRouter

    一. 路由的简单使用 二. 动态路由匹配 我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件。例如,有一个...

  • router4 ts动态添加路由

    今天研究route4.0 在vue3里面,使用ts的方式定义路由并且进行动态添加。route4.0在添加路由的方式...

  • Vue-router2.0基础实践

    基础用法: 动态路由匹配: 嵌套路由: 编程式路由: 命名路由: 命名视图:

网友评论

      本文标题:vue3中动态添加路由刷新无法正确匹配路由组件

      本文链接:https://www.haomeiwen.com/subject/vncezltx.html