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里面。(这就是导致出现白屏的问题所在)人都麻了

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

[云原生] K8s之pod进阶

一、pod的状态说明 &#xff08;1&#xff09;Pod 一直处于Pending状态 Pending状态意味着Pod的YAML文件已经提交给Kubernetes&#xff0c;API对象已经被创建并保存在Etcd当中。但是&#xff0c;这个Pod里有些容器因为某种原因而不能被顺利创建。比如&#xff0c;调度不成功(…

【rust】11、所有权

文章目录 一、背景二、Stack 和 Heap2.1 Stack2.2 Heap2.3 性能区别2.4 所有权和堆栈 三、所有权原则3.1 变量作用域3.2 String 类型示例 四、变量绑定背后的数据交互4.1 所有权转移4.1.1 基本类型: 拷贝, 不转移所有权4.1.2 分配在 Heap 的类型: 转移所有权 4.2 Clone(深拷贝)…

linux系统Jenkins的安装

Jenkins安装 安装上传安装包解压包首次登录要去服务器查看密码&#xff0c;更改密码选择需要安装的插件设置Admin用户和密码安装完成 安装 上传安装包 上传 jdk17 tomcat jenkins.war的安装包 . 上传 tomcat安装包解压包 解压jdk tar xf jdk-11.0.18_linux-x64_bin.tar.gz解…

甲级!亚信安全再次荣膺CNCERT国家级网络安全应急服务支撑单位称号

再获认可 近日&#xff0c;国家计算机网络应急技术处理协调中心&#xff08;CNCERT&#xff09;正式公布第十届CNCERT网络安全应急服务支撑单位遴选结果&#xff0c;亚信安全凭借创新技术实力&#xff0c;以及重大突发网络安全事件的应对能力&#xff0c;再次荣获CNCERT甲级网…

AI新秀Mistral:“Open AI“ 新时代

最近互联网出现不少类似“下一代openai”、“GPT-4最强竞品”、“法国AI独角兽”、“欧洲的OpenAI”、“微软新宠儿”.... 的文章&#xff0c;都会附带一张图片&#xff0c;就是下面这张&#xff1a; 那么到底发生了什么&#xff0c;出来个什么东西呢&#xff1f;就是本文的主…

深入英伟达盈利中心,反思一个正被“忽视”的Web3.0赛道

出品&#xff5c;欧科云链研究院 作者&#xff5c;Hedy Bi 最近&#xff0c;英伟达&#xff08;Nvidia&#xff09;发布了2023年第四季度财报&#xff0c;超出了华尔街预期&#xff0c;并在美国股市的延时交易中表现出色。欧科云链研究院通过分析英伟达的财报&#xff0c;我们…

前端架构: 脚手架包管理工具之lerna的全流程开发教程

Lerna 1 &#xff09;文档 Lerna 文档 https://www.npmjs.com/package/lernahttps://lerna.js.org [请直达这个链接] 使用 Lerna 帮助我们做包管理&#xff0c;并不复杂&#xff0c;中间常用的命令并不是很多这里是命令直达&#xff1a;https://lerna.js.org/docs/api-referen…

Unity 佳能SDK 及数据获取

1. 填写信息跟官方申请SDK,大概1-2个工作日会邮件回复你 佳能(中国)- 佳定制(佳能影像产品),SDK,EDSDK,CCAPI,软件开发包下载 2. 将SDK这两个文件放到 Unity Plugins文件夹 3. 把CameraControl 下面只要是绿色的 .cs 文件都复制到Unity 中

新闻网站封锁AI爬虫 AI与新闻媒体博弈继续

随着ChatGPT等新兴AI模型的兴起&#xff0c;它们所依赖的网络爬虫正面临来自全球主流新闻网站的大规模封锁。Richard Fletcher博士团队对十个国家主流新闻网站的统计发现&#xff0c;到2023年底&#xff0c;48%的网站屏蔽了OpenAI的爬虫&#xff0c;24%屏蔽了Google的爬虫。那么…

浅析前端的堆栈原理以及深浅拷贝原理

浅析前端的堆栈原理以及深浅拷贝原理 首先来看一个案例 const obj {name:hzw,age:18 } let objName2 obj objName2.age 12 console.log(obj,objName2) // {name: hzw, age: 12} {name: hzw, age: 12}这里是不是很奇怪&#xff0c;为什么&#xff0c;为什么我改变objName2的…

type may not be empty [type-empty]

Git提交失败原因分析 原因是使用了规范commit信息的工具&#xff0c;你的提交信息不符合规范&#xff0c;所以被拒绝了 commit规范工具 commitlinthusky 我这个项目使用husky&#xff0c;提交规范比较严格。 解决方式一&#xff1a; 修改提交信息&#xff0c; 使其符合规范…

代码里没有报错,但是java编译报错找不到符号

问题分析&#xff1a; 最近在尝试maven编译&#xff0c;所以不小心点了mvn clean的命令&#xff0c;将之前编译的工程清除了&#xff0c;导致后边再编译项目上的时候就报了一堆错误。代码没问题&#xff0c;但编译不通过&#xff0c;报找不到符号的错误&#xff0c;搜了下这样解…

Windows安装VNC连接工具并结合cpolar实现远程内网Ubuntu系统桌面

文章目录 前言1. ubuntu安装VNC2. 设置vnc开机启动3. windows 安装VNC viewer连接工具4. 内网穿透4.1 安装cpolar【支持使用一键脚本命令安装】4.2 创建隧道映射4.3 测试公网远程访问 5. 配置固定TCP地址5.1 保留一个固定的公网TCP端口地址5.2 配置固定公网TCP端口地址5.3 测试…

Linux测试端口开放

Linux测试端口开放 Linux测试端口是否开放有多种命令&#xff0c;如nc、telnet、ssh、curl、wget nc nc&#xff08;netcat&#xff09;可用于创建 TCP 或 UDP 连接、扫描端口、传输文件等 扫描指定端口&#xff1a; nc -zv ip port-z 使用0输入/输出模式&#xff0c;只在…

【C#】SixLabors.ImageSharp和System.Drawing两者知多少

欢迎来到《小5讲堂》 大家好&#xff0c;我是全栈小5。 这是《C#》系列文章&#xff0c;每篇文章将以博主理解的角度展开讲解&#xff0c; 特别是针对知识点的概念进行叙说&#xff0c;大部分文章将会对这些概念进行实际例子验证&#xff0c;以此达到加深对知识点的理解和掌握。…

Docker数据集与自定义镜像:构建高效容器的关键要素

目录 博客前言 一.数据卷 1.数据卷介绍 2.实战 宿主机和容器共享目录 容器和容器之间共享目录 二.自定义镜像 1.自定义镜像介绍 2.实战 2.1自定义centos&#xff0c;具备vim及ifconfig作用 构建镜像 通过镜像运行一个容器进行测试 2.2自定义tomact&#xff08;文件为…

云桥通+IDC数据中心:SDWAN企业组网实现高效连接案例

一、需求和背景 云桥通曾服务的一家大型跨国企业C公司&#xff0c;C公司多个数据中心分布在全球各地。为了实现数据共享和协作&#xff0c;数据中心之间需要建立稳定高效的网络连接。然而&#xff0c;传统的MPLS专线网络存在昂贵的成本和漫长的开通周期&#xff0c;无法满足企…

轻松获取邀请奖励,提升用户参与度——xinstall免填邀请码功能实战

随着移动互联网的迅猛发展&#xff0c;App推广已成为各大企业争夺市场份额的重要手段。然而&#xff0c;在推广过程中&#xff0c;如何让用户更便捷地参与活动、绑定关系并获取奖励&#xff0c;一直是困扰企业的难题。今天&#xff0c;我们就来聊聊如何通过xinstall的免填邀请码…

初体验通义灵码-JS篇

安装 我是JetBrains IDEs的付费忠粉&#xff0c;使用的他们家的全家桶&#xff0c;故先选择在Webstorm安装通义灵码 按通义灵码的官方指引安装即可&#xff1a;https://tongyi.aliyun.com/lingma/download 使用 安装后重启webstorm&#xff0c;IED左右下会有通义灵码的登录…

python自动化学习--3.8python操作EXCEL文件python日志收集处理

1、Excel文件处理 安装 openpxl 第三方库 openpxl 模块三大组件: 1、工作簿 &#xff08;包含多个sheet工作表&#xff09; 2、工作表 &#xff08;某个数据包含在某个工作表&#xff09; 3、单元格 1、创建excel工作簿 import openpyxl"""Excel表格的创建…