vue3 RouterLink路由跳转后RouterView组件未加载,页面未显示,且控制台无任何报错

在使用 vue3 开发项目过程中,组件之间使用 router-link 跳转,但是当我开发的组件跳转到其他组件时,其他组件的页面未加载,再跳转回自己的组件时,自己的组件也加载不出来了,浏览器刷新后页面可以加载出来。但是初始页面如果是其他组件,进行路由跳转就没有这个问题。

当我打开控制台查看页面时,发现页面未加载是因为 RouterView 组件未加载,如下图:
在这里插入图片描述
代码为:

*在这里插入图片描述*

在排除了路由逻辑以及没有其他任何页面报错的情况下,我蒙了。经多方搜索,然后终于让我找到了解决方法。
搜索得到的解决办法URL
原来是我的 index.vue 页面下的根元素有两个,而 transition 组件包裹下的组件中只能有一个根元素

在这里插入图片描述
于是修改代码:
在这里插入图片描述
注意:即便是被注释的代码,template 下也只能有一个根元素。

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/52088.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

6.画面渲染及背景-《篮球比赛展示管理系统》现场管理员角色操作手册

通过[特效实验室]及[更换背景] 对整个展示界面的底部图层进行动画渲染。此功能是平台的一大特色。一般用在选手上场或颁奖等。用户可以根据现场情况,妥善发挥。背景图片及其特效,应该在比赛之前设置好。

java: 错误: 无效的源发行版:17

错误信息 java: 错误: 无效的源发行版&#xff1a;17 原因 这个错误通常表示你的 Java 编译器版本不支持你指定的 Java 版本。 解决方式 pom.xml 版本改为18或8 <properties><java.version>18</java.version></properties>设置&#xff1a; 改完…

Transformer模型框架

Transformer 模型框架源自2017年论文 《Attention is All You Need》 Self-Attention 1、Transformer 结构 Transformer 整体框架由 Encoder 和 Decoder 组成&#xff0c;本质上是 Self-Attention 模型的叠加。 2、Encoder Encoder 的主要作用是让机器更清楚的了解到句子中…

时钟信号如何影响高分辨率ADC

1 简介 在数据采集系统中&#xff0c;时钟作为时间基准&#xff0c;使所有部件都能同步工作。对于ADC&#xff0c;精确而稳定的时钟确保主机向ADC发送命令&#xff0c;ADC以正确的顺序接收来自主机的命令。更为重要的是&#xff0c;系统时钟信号允许用户在需要时对输入进行采集…

为什么?MCU中需要ADC模块

“做成ADC拿去诡市,贱卖!”-----长安红茶续篇 库比蒂诺的枪声——苹果发布AI PC芯片M4,打响2024年AI大模型第一枪 芯品快报:亚德诺(ADI)超静音步进电机驱动芯片——TMC2209 为什么MCU中需要ADC模块 原创 芯愿景软件 集成电路大数据平台 在微控制器(MCU)芯片中,通…

nginx基础配置实例

nginx账户认证功能 由ngx_http_auth_basic_module 模块提供此功能 建立非交互用户认证 [rootNginx ~]# htpasswd -cmb /usr/local/nginx/conf/.htpasswd admin admin创建web测试静态文本 mkdir /webdata/nginx/example.org/example/login echo login > /webdata/nginx/e…

遗传算法与深度学习实战(7)——使用遗传算法解决N皇后问题

遗传算法与深度学习实战&#xff08;7&#xff09;——使用遗传算法解决N皇后问题 0. 前言1. N 皇后问题2. 解的表示3. 遗传算法解决 N 皇后问题小结系列链接 0. 前言 进化算法 (Evolutionary Algorithm, EA) 和遗传算法 (Genetic Algorithms, GA) 已成功解决了许多复杂的设计…

JWT加密工具

JWT加密工具 2.JWT介绍 JSON Web Token&#xff08;JWT&#xff09;,它定义了一种简洁的、自包含的协议格式&#xff0c;JWT可以使用HMAC算法或使用RSA的公钥/私钥对进行签名&#xff0c;防止被篡改。 JWT官网&#xff1a; https://jwt.io JWT组成 JWT由三个部分组成&…

AI-Talk开发板SDK

一、说明 可以在Windows、Ubuntu、macOS安装和编译SDK。此文章只介绍在Ubuntu下安装和编译SDK。 其它方式可参考聆思官方环境搭建教程。 二、环境搭建 1、安装依赖 安装git和wget软件包&#xff1a; sudo apt install --no-install-recommends git wget 如果已安装就跳…

C/C++实现蓝屏2.0

&#x1f680;欢迎互三&#x1f449;&#xff1a;程序猿方梓燚 &#x1f48e;&#x1f48e; &#x1f680;关注博主&#xff0c;后期持续更新系列文章 &#x1f680;如果有错误感谢请大家批评指出&#xff0c;及时修改 &#x1f680;感谢大家点赞&#x1f44d;收藏⭐评论✍ 前…

这家AGV机器人龙头高歌猛进,半年营收27亿,国内对手们慌了吗?

导语 大家好&#xff0c;我是社长&#xff0c;老K。专注分享智能制造和智能仓储物流等内容。 机器人业务高歌猛进&#xff0c;海康威视创新引擎全速运转 海康威视于近日揭晓了其2024年上半年的辉煌成绩单。这份报告不仅彰显了公司整体业务的稳健增长&#xff0c;更引人注目的是…

vue-element-admin解决三级目录的KeepAlive缓存问题(详情版)

vue-element-admin解决三级目录的KeepAlive缓存问题&#xff08;详情版&#xff09; 本文章将从问题出现的角度看看KeepAlive的缓存问题&#xff0c;然后提出两种解决方法。本文章比较详细&#xff0c;如果只是看怎么解决&#xff0c;代码怎么改&#xff0c;请前往配置版。 一…

uView的u-notice-bar组件横向滚动不生效问题解决

uView的u-notice-bar组件横向滚动不生效问题解决 此问题导致我换了vant组件的 notice-bar&#xff0c;一度以为是该组件存在bug。uniapp中有vant组件打包小程序又是一个问题&#xff0c;于是乎不得不回来继续折腾uView的u-notice-bar组件&#xff0c;偶然发现css属性animation-…

【Cypress】截图插件

在视觉回归测试中&#xff0c;基准截图和测试运行中的截图是指两个不同时间点或条件下捕捉到的页面截图&#xff0c;用于比较和检测视觉差异。 1. 基准截图 (Baseline Image): - 这是你在项目中首次运行视觉回归测试时保存的截图&#xff0c;它代表了页面在最初设定的理想状…

英语写作中“使……能够”allow enable的用法及替代表达

现在英语写作中allow enable 使用比较多&#xff0c;为了丰富表达&#xff0c;本文给出allow enable 例句的同时给出替代表达。 例句1&#xff1a; Mobile phones allow/enable people to keep contact with others anywhere anytime.&#xff08;手机使人们任何地点任何时间…

26-vector arraylist和linkedlist的区别

‌Vector, ArrayList, 和 LinkedList 是Java中常见的三种列表实现&#xff0c;它们各自具有不同的特点和适用场景。‌ ‌同步性与线程安全‌&#xff1a; ‌Vector‌ 是同步的&#xff0c;即线程安全的&#xff0c;它的所有方法都是同步的&#xff0c;可以由两个线程安全地访问…

nginx简介及功能介绍

目录 niginx与apache niginx特点 nginx模块介绍 nginx的编译安装 nginx的平滑升级及版本回滚 niginx的常用参数 nginx独立文件编写 location匹配用法 自定义日志 文件检测 nginx中的长链接管理 nginx下载服务器设置 nginx的状态页面 nginx的数据压缩功能 nginx的…

Python3 集成 gRPC 服务

Python3 集成 gRPC 服务及 protocol buffers 1、gRPC是什么&#xff1f;1.1、gRPC大致请求流程1.2、gRPC特性1.3、gRPC优势和劣势1.3.1、优势1.3.2、劣势 2、构建一个python3的gRPC服务2.1、虚拟环境搭建(可选择自动安装pip)2.1、引入相关依赖2.2、创建项目2.2.1、项目整体结构…

springboot 整合spring-boot-starter-data-elasticsearch

依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-elasticsearch</artifactId></dependency> 配置 spring:elasticsearch:rest:uris: "http://localhost:9200" # Elastics…

集团数字化转型方(五)

集团数字化转型方案通过全面整合人工智能&#xff08;AI&#xff09;、大数据分析、云计算和物联网&#xff08;IoT&#xff09;等前沿技术&#xff0c;构建了一个高度智能化的业务平台&#xff0c;从而实现业务流程的自动化、数据驱动的决策支持、精准的市场预测、以及个性化的…