Vue3切换路由白屏刷新后才显示页面内容

1.首先检查页面路由以及页面路径配置是否配置错误。

在router-view 中给路由添加key标识。
!!注意:有使用layout封装布局的,是在layout下的主页面中的 router-view 添加标识,不是在src根目录下main.vue中修改(在这个文件修改会造成每次切换路由导航标签都会收起)

<script setup lang="ts">
import { useTagsViewStore } from "@/store/modules/tagsView";import { useRoute} from "vue-router";
const tagsViewStore = useTagsViewStore();const route = useRoute();
const key = computed(() => {return route.path + Math.random();
});
</script><template><section class="app-main"><router-view v-slot="{ Component, route }" :key="key"><transition name="router-fade" mode="out-in"><keep-alive :include="tagsViewStore.cachedViews"><component :is="Component" :key="route.fullPath" /></keep-alive></transition></router-view></section>
</template>


2.如果页面刷新可以出来那证明不是配置的问题,其次检查是否在根组件标签最外层包含了个最大的div盒子包裹内容。(一般vue3是可以不使用div盒子包裹的)


3.最后如果发现上面都没有问题,那么问题就在这里了,看看是否在template标签下面直接有注释,如果有需要把注释写到div里面。(这就是导致出现白屏的问题所在)人都麻了

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

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

相关文章

基于vue-office实现docx、xlsx、pdf文件的在线预览

概述 在做项目的时候会遇到docx、xlsx、pdf等文件的在线预览需求&#xff0c;实现此需求可以有多种解决方式&#xff0c;本文基于vue-office实现纯前端的文件预览。 效果 如下图&#xff0c;分别为docx、xlsx、pdf三种类型的文件在线加载后的效果。你也可以访问官方预览网址…

sawForceDimensionSDK安装,sigma7+ros

force dimension的sdk中没有关于ros&#xff0c;借助开源的sawForceDimensionSDK实现对于数据的封装和可视化&#xff0c;方便后续使用 链接&#xff1a; GitHub - jhu-saw/sawForceDimensionSDK 具体步骤&#xff1a; 安装qt和ros&#xff0c;官网下载Force Dimension SDK …

小马识途营销顾问解析舆情处置方法

大部分知名企业都逃不过负面舆情这一关&#xff0c;有负面不一定企业就不规范&#xff0c;产品就不好。其实&#xff0c;企业做大了&#xff0c;难以做到尽善尽美&#xff0c;有时候是同行不正当竞争造成的…… 总之&#xff0c;网络平台上面的负面舆情信息的影响不可小视&…

什么是回表、索引覆盖、索引下推【重点】

参考链接 【1】https://xiaolincoding.com/mysql/index/index_interview.html#%E6%8C%89%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E5%88%86%E7%B1%BB 【2】https://www.toutiao.com/article/7095749260137726476/?wid1709192807222 【3】https://zhuanlan.zhihu.com/p/401198674…

算法沉淀——动态规划之两个数组的 dp(下)(leetcode真题剖析)

算法沉淀——动态规划之两个数组的 dp 01.正则表达式匹配02.交错字符串03.两个字符串的最小ASCII删除和04.最长重复子数组 01.正则表达式匹配 题目链接&#xff1a;https://leetcode.cn/problems/regular-expression-matching/ 给你一个字符串 s 和一个字符规律 p&#xff0c…

产品经理岗位的任职资格和职业规划

产品经理主要是商业银行以客户为导向的&#xff0c;具体负责组织银行某一金融产品线的创新设计、生产营销和管理服务的工作。这类人士主要负责应用实施工作&#xff0c;其中产品线由一系列的产品构成&#xff0c;公司的产品经理主要分为全过程产品创新设计专家、全过程产品生产…

武汉灰京文化:跨平台和云游戏,手游行业的未来发展趋势

随着科技的不断进步和智能设备的普及&#xff0c;手游行业正迎来新的发展机遇。武汉灰京文化认为&#xff0c;在这个过程中&#xff0c;跨平台游戏和云游戏作为两大关键技术将推动手游行业迈向更加丰富、便捷和多元化的发展。 跨平台游戏的出现将为玩家带来全新的游戏体验。在…

java常用环境docker安装

配置目录 rocketmqredismysql不配置binlog配置binlog Nacoszookeeper 本文为精简安装&#xff0c;部分不带容器卷映射&#xff0c;仅供以学习使用。 rocketmq nameservice sudo docker run -d \ --privilegedtrue \ --name rmqnamesrv \ -p 9876:9876 \ -e "MAX_HEAP_SI…

visio、ppt、office等另存图片,如何设置更清晰

visio、ppt、office等另存图片&#xff0c;如何设置更清晰 选中要另存为的部分——文件——另存为——选好位置——格式选jpg——保存——按下图设置&#xff1a;质量100%&#xff0c;分辨率选打印机&#xff0c;大小选屏幕——确定

android开发前景2019,android高级面试framework

到底是公司养活了我&#xff0c;还是我养活了公司&#xff1f; 1. 很难在一家公司干到退休 在我父母那一代&#xff0c;一个上班的职工&#xff0c;往往可以在一家单位干到退休&#xff0c;名副其实的“铁饭碗”。甚至更早之前的年代&#xff0c;职工的子女还可以接父母的班&a…

计算机专业大学四年应该如何规划(Java方向)

计算机专业的学生&#xff0c;如何在大学四年内提高自己的竞争力&#xff0c;毕业之后直接进大厂工作&#xff1f; 以下将从大学四年计算机专业的学习规划、课程设置、能力提升、参考书籍等方面&#xff0c;为同学们提供一些建议和指导。 大一&#xff1a; 主攻技能学习并且达…

数据结构之数组

一、定义 数组&#xff08;Array&#xff09;是一种用连续的内存空间存储相同数据类型数据的线性数据结构。 二、内存结构 1.创建数组 我们创建一个数组 int[] array {22,33,88,66,55,25} &#xff0c;在内存结构如下图所示&#xff1a; 首先创建了array数组&#xff0c;会…

Node.js基础---npm与包

包 概念&#xff1a;Node.js 中的第三方模块又叫做包 来源&#xff1a;由第三方个人或团队开发出来的&#xff0c;免费使用&#xff0c;且为开源 为什么需要&#xff1a;Node.js的内置模块只有一些底层API&#xff0c;开发效率低 包是基于内置模块封装出来的&#xff0c;提供更…

python实现跨进程(跨py文件)通信01

前言 项目中总会遇到数据需要跨进程通信的问题&#xff0c;今天就给大家带来一套简单的跨进程通信代码。代码分为服务端与客户端两部分。 一、server端 import multiprocessing import timedef do_socket(conn, addr, ):try:while True:if conn.poll(1) False:time.sleep(0…

ZCANPRO基础操作流程

硬件准备 测试单关节需要准备如下工具&#xff1a; 电源&#xff1a; 推荐使用20-27V直流电源。关节峰值功率为额定功率的三倍。 CAN卡&#xff1a; 推荐使用周立功USB转CANFD卡&#xff0c;我们的单关节测试软件适配了该型号CAN卡驱动。 WHJ系列关节模组 WHJ系列关节模组包含…

2024最新大厂Android面试真题解析,三年老Android经验面经

前言 不知道大家面试的时候&#xff0c;有没有遇到这种情况&#xff0c;面试工资谈的是10K&#xff0c;最后干着40K的活&#xff01;说着冠冕堂皇&#xff0c;提升大家能力的话&#xff0c;做着死命压榨员工&#xff0c;996成了程序员心里的魔咒&#xff01; 初级安卓开发工程…

基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的活体人脸检测系统(Python+PySide6界面+训练代码)

摘要&#xff1a;本篇博客详细讲述了如何利用深度学习构建一个活体人脸检测系统&#xff0c;并且提供了完整的实现代码。该系统基于强大的YOLOv8算法&#xff0c;并进行了与前代算法YOLOv7、YOLOv6、YOLOv5的细致对比&#xff0c;展示了其在图像、视频、实时视频流和批量文件处…

CSS_实现三角形和聊天气泡框

如何用css画出一个三角形 1、第一步 写一个正常的盒子模型&#xff0c;先给个正方形的div&#xff0c;便于观察&#xff0c;给div设置宽高和背景颜色 <body><div class"box"></div> </body> <style>.box {width: 100px;height: 100px…

常用git 打tag命令

1.查看所有tag git tag 2.创建 v5.0.0的tag git tag v5.0.0 git tag &#xff08;创建后查看&#xff09; 3.推送到远程tag git push origin v5.0.0 4.删除远程tag git push origin --delete v5.0.0 5.删除本地tag git tag -d v5.0.0 6.添加带有备注信息的tag git tag v5.…

Java反射机制底层原理

反射机制 这篇文章我是参考了Java 中的反射机制&#xff08;两万字超全详解&#xff09;_java反射-CSDN博客 然后我在这里做一下总结&#xff0c;因为原文章真的很好&#xff0c;我才疏学浅没什么进行补充&#xff0c;只能做出自己的总结并且写一下自己对这个的理解。 原理&…