1.问题

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

2. 问题查找

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



3.问题原因

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

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

4.解决办法

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

vue3中动态添加路由刷新无法正确匹配路由组件的更多相关文章

  1. VC中动态添加控件

    VC中动态添加控件 动态控件是指在需要时由Create()创建的控件,这与预先在对话框中放置的控件是不同的. 一.创建动态控件: 为了对照,我们先来看一下静态控件的创建. 放置静态控件时必须先建立一个 ...

  2. 谨记给UpdatePanel中动态添加的控件赋ID

    原文:谨记给UpdatePanel中动态添加的控件赋ID 昨天下定决 心对上次做的布局编辑器控件加以改进,其中最主要变化的就是要完全使用ASP.NET AJAX!但是很遗憾,虽然耳闻已久,但目前对AS ...

  3. Android 在布局容器中动态添加控件

    这里,通过一个小demo,就可以掌握在布局容器中动态添加控件,以动态添加Button控件为例,添加其他控件同样道理. 1.addView 添加控件到布局容器 2.removeView 在布局容器中删掉 ...

  4. Android 在程序中动态添加 View 布局或控件

    有时我们需要在程序中动态添加布局或控件等,下面用程序来展示一下相应的方法: 1.addView 添加View到布局容器 2.removeView 在布局容器中删掉已有的View 3.LayoutPar ...

  5. vue中动态添加div

    知识点:vue中动态添加div节点,点击添加,动态生成div,点击删除,删除对应的div,其中数组的长度是动态改变的,如在from表单中应用,直接在提交方法中,获得list,获取所填的元素即可 效果: ...

  6. html页面下拉列表中动态添加后台数据（格式化数据，显示出数据的层次感）

    html页面下拉列表中动态添加后台数据(格式化数据,显示出数据的层次感) 效果图: 运行原理和技术: 当页面加载完毕,利用jquery向后台发送ajax请求,去后台拼接<select>&l ...

  7. Celery 分布式任务队列快速入门 以及在Django中动态添加定时任务

    Celery 分布式任务队列快速入门 以及在Django中动态添加定时任务 转自 金角大王 http://www.cnblogs.com/alex3714/articles/6351797.html ...

  8. 周记4——vue中动态添加图片无效、build上线后background-image路径问题

    又是一个周五,又一周要过去了...很开心,这周遇到了vue中的一个比较常见的坑,网上随便一搜就有了很多解决方案...“幸运”的是,我选了一个带坑的方案...所以我觉得有必要记录一下这个“坑中坑”... ...

  9. vue向数组中动态添加数据

    vue中数据更新通过v-model实现,向数组中添加数据通过push()实现,向shortcuts数组中动态添加newShortcut对象中的title和action this.shortcuts.p ...

  10. ASP.NET中Literal控件的使用方法（用于向网页中动态添加内容）

    原文:https://www.jb51.net/article/82855.htm 可以将 Literal 控件用作网页上其他内容的容器.Literal 控件最常用于向网页中动态添加内容.简单的讲,就 ...

随机推荐

  1. 协议 UARST & 数据发送与接收

    STM32具有的协议 UASRT是通用异步/同步收发器,UART是通用异步收发器 串口空闲状态时高电平,开始传输数据时,第一个数据为固定的低电平: 数据:最后为高电平的停止位 奇偶校验:通过+1或者不 ...

  2. obsidian 日记本倒序汇总 获取标题显示 插件dataviewjs list

    obsidian 日记本倒序汇总 获取标题显示 插件dataviewjs list // dataviewjs function removeDuplicate(arr) { return arr.f ...

  3. CYQ.Data 操作 Json 性能测试：对比 Newtonsoft.Json

    前言: 在 CYQ.Data 版本更新的这么多年,中间过程的版本都在完善各种功能. 基于需要支持或兼容的代码越多,很多时候,常规思维,都把相关功能完成,就结束了. 实现过程中,无法避免的会用到大量的反 ...

  4. 记录--卸下if-else 侠的皮衣！- 策略模式

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 当我是if-else侠的时候 怕出错 给我一个功能,我总是要写很多if-else,虽然能跑,但是维护起来确实很难受,每次都要在一个方法里面 ...

  5. 记录--uni-app App端半屏连续扫码

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 本文用一个简单的 demo 讲解 App端 半屏连续扫码 的实现方式,包括(条形码.二维码等各种各样的码). 我会从实现思路讲起,如果你比 ...

  6. dotNet符号文件(pdb)，符号包(snupkg)和SourceLink

    前言 本文的主题是 Visual Studio 调试 NuGet 包,以及符号包的概念,如何去发布一个 NuGet 包,让我们的 NuGet 包支持 SouceLink,这些都是我们开发中比较容易忽视 ...

  7. AI实用指南：5分钟搭建你自己的LLM聊天应用

    今天,我们将迅速着手搭建一个高效且富有创意的混元聊天应用,其核心理念可以用一个字来概括--快.在这个快节奏的时代,构建一个基础的LLM(Large Language Model,大型语言模型)聊天应用 ...

  8. KingbaseES V8R6 创建索引create index concurrently被阻塞

    前言 CREATE INDEX CONCURRENTLY(CIC)是DBA们最常用的语句之一,它的好处是不阻塞DML语句. 但在大事务.长事务较多的系统,它可能被阻塞得很久. 本篇就从这个阻塞的案例开 ...

  9. KingbaseES V8R6备份恢复案例之---sys_restore实现schema转换

    **案例说明:** sys_restore用于sys_dump备份的数据恢复,在实际的应用中有需求,将从sys_dump备份对象从原schema中转换到到另外的schema,sys_restore支持 ...

  10. KingbaseES V8R6 集群运维系列--archive_cleanup_command参数应用

    ​ 案例说明: 参数archive_cleanup_command可以配置在kingbase.conf文件中,用于备库清理不在需要的归档日志,参数详细说明见下图: https://postgresql ...