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. 摆脱鼠标系列 - vscode - Esc 返回时候 强制显示英文输入法 - ahk 脚本 - autoHotKey

    为什么 摆脱鼠标系列 - vscode - Esc 返回时候 强制显示英文输入法 切换网页的时候,回来还是搜索输入法,就想到按esc,直接强制英文输入法 之前vim插件里面 用了一个 im-selec ...

  2. [win10] 开始-设置 / 右键-显示设置 / 右键个性化 等都不好使了。。 ms-settings:display

    现象: 各种win10自带的都打不开了. 发现: 最近总是断网,重启下就好了,然后点击网络,就一直出不来.后来发现所有win10的窗口都出不来了.控制面板等等. 解决:好消息是最后解决了.坏消息是没有 ...

  3. C语言中的强制转换

    许久没有遇到的问题   C语言真是博大精深,越使用它,就越发感觉到它的威力和恐怖,最近在做算法的时候,遇到了一个强转的错误,把人折腾的够受,这次要好好梳理一下了,希望下次不能再犯此类的问题. 强制转换 ...

  4. Ubuntu18.04声卡配置问题解决

    一 问题 对于经常做音频的工程师来说,经常需要使用linux下的声卡切换,期间遇到了各种问题,自使用了pavucontrol,问题没有了.真是瞬间感觉赏心悦目啊. 二 安装使用方法 安装pavucon ...

  5. IO 多路复用原理

    IO 多路复用 普通情况下,一个进程只能监视一个文件描述符(阻塞),如果使用非阻塞 IO,则会使 CPU 频繁陷入内核和空转,降低效率.而IO 多路复用是操作系统提供的接口,他会帮你同时监视多个 fd ...

  6. Performance Improvements in .NET 8 -- JIT部分翻译

    相关视频 动态PGO 基准测试设置 在本文中,我包括微基准测试以突出讨论的各个方面.其中大部分基准测试都是使用BenchmarkDotNet v0.13.8实现的,除非另有说明,否则每个基准测试都有一 ...

  7. Welcome to YARP - 2.1配置功能 - 配置文件

    目录 Welcome to YARP - 1.认识YARP并搭建反向代理服务 Welcome to YARP - 2.配置功能 2.1 - 配置文件(Configuration Files) 2.2 ...

  8. 常用命令--复制-备份--cp--mv--scp--rsync

    常用命令--复制-备份--cp--mv--scp--rsync cp cp命令用来将一个或多个源文件或者目录复制到指定的目的文件或目录.它可以将单个源文件复制成一个指定文件名的具体的文件或一个已经存在 ...

  9. 记录--手把手教你Vue+ECharts+高德地图API实现天气预报数据可视化

    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 前言 所谓数据可视化,我们可以理解为从宏观角度来看一眼就能看出来整个数据的占比,走向.对于数据可视化,很多互联网公司是很看重这一块的,包括 ...

  10. [MAUI]模仿哔哩哔哩的一键三连

    @ 目录 创建弧形进度条 绘制弧 准备物料 创建气泡 创建手势 创建交互与动效 项目地址 哔哩哔哩(Bilibili)中用户可以通过长按点赞键同时完成点赞.投币.收藏对UP主表示支持,后UP主多用&q ...