vue3某一个路由切换,导致所有路由页面均变成空白页

index1.vue

html 复制代码
<template>
	<div>展示区域1</div>
	<div>展示区域2</div>
</template>

index2.vue

html 复制代码
<template>
	<div>展示区域1</div>
</template>

当index1切换到别的路由时,会变成空白页,再切换所有页面都是空白页 ,只有刷新 后,才能恢复正常;

而通过index切换路由时,是正常的

可能是Vue 3.5.13 中使用两个 div 作为根节点导致页面空白的可能原因

哪怕是写一个div,加个<!--注释-->注释也不行

版本:

js 复制代码
"dependencies": {
		"@axolo/json-editor-vue": "^0.3.2",
		"@chenfengyuan/vue-qrcode": "^2.0.0",
		"@element-plus/icons-vue": "^2.0.10",
		"@form-create/element-ui": "3.2.16",
		"@fullcalendar/adaptive": "^6.1.19",
		"@fullcalendar/core": "^6.1.19",
		"@fullcalendar/daygrid": "^6.1.19",
		"@fullcalendar/interaction": "^6.1.19",
		"@fullcalendar/vue3": "^6.1.19",
		"@microsoft/fetch-event-source": "^2.0.1",
		"@popperjs/core": "2.11.8",
		"@vueuse/core": "^10.4.1",
		"@wangeditor-next/editor": "5.6.34",
		"@wangeditor-next/editor-for-vue": "5.1.14",
		"autoprefixer": "^10.4.7",
		"axios": "^1.3.3",
		"codemirror": "5.65.5",
		"cropperjs": "^1.5.12",
		"crypto-js": "^3.1.9-1",
		"disable-devtool": "^0.3.8",
		"driver.js": "^0.9.8",
		"echarts": "^5.4.1",
		"element-plus": "2.5.5",
		"exif-js": "^2.3.0",
		"form-create-designer": "3.2.11-oem",
		"highlight.js": "^11.7.0",
		"image-conversion": "^2.1.1",
		"js-base64": "^3.7.7",
		"js-cookie": "^3.0.1",
		"json-editor-vue3": "^1.1.1",
		"lodash": "^4.17.21",
		"marked": "^12.0.2",
		"markmap-common": "0.15.6",
		"markmap-lib": "0.15.8",
		"markmap-view": "0.15.8",
		"mitt": "^3.0.0",
		"moment": "^2.30.1",
		"nprogress": "^0.2.0",
		"pinia": "2.0.32",
		"postcss": "8.4.40",
		"print-js": "^1.6.0",
		"qrcode": "1.5.1",
		"qs": "^6.11.0",
		"screenfull": "^6.0.2",
		"sm-crypto": "^0.3.12",
		"sortablejs": "^1.15.0",
		"splitpanes": "^3.1.5",
		"tailwindcss": "3.4.17",
		"v-calendar": "3.1.2",
		"vue": "3.5.13",
		"vue-clipboard3": "^2.0.0",
		"vue-echarts": "7.0.3",
		"vue-i18n": "9.2.2",
		"vue-router": "^4.1.6",
		"vue3-tree-org": "^4.2.2",
		"vue3-video-play": "1.3.1-beta.6",
		"vuedraggable": "^4.1.0",
		"xlsx": "^0.18.5"
	},
	"devDependencies": {
		"@swc/core": "1.6.13",
		"@types/crypto-js": "^4.2.2",
		"@types/markdown-it": "^14.1.1",
		"@types/node": "^18.14.0",
		"@types/nprogress": "^0.2.0",
		"@types/sm-crypto": "^0.3.4",
		"@types/sortablejs": "^1.15.0",
		"@typescript-eslint/eslint-plugin": "^5.53.0",
		"@typescript-eslint/parser": "^5.53.0",
		"@vitejs/plugin-vue": "^4.0.0",
		"@vue/compiler-sfc": "^3.2.47",
		"consola": "^2.15.3",
		"cross-env": "7.0.3",
		"daisyui": "4.11.1",
		"eslint": "^8.34.0",
		"eslint-plugin-vue": "^9.9.0",
		"pinia-plugin-persist": "^1.0.0",
		"prettier": "2.8.4",
		"sass": "1.58.3",
		"terser": "^5.31.1",
		"typescript": "^4.9.5",
		"unplugin-auto-import": "^0.13.0",
		"vite": "^4.3.3",
		"vite-plugin-compression": "^0.5.1",
		"vite-plugin-style-import": "^2.0.0",
		"vite-plugin-top-level-await": "^1.3.0",
		"vite-plugin-vue-setup-extend": "^0.4.0",
		"vue-eslint-parser": "^9.1.0"
	},
相关推荐
Up九五小庞5 小时前
开源埋点分析平台 ClkLog 本地部署 + Web JS 埋点测试实战--九五小庞
前端·javascript·开源
qq_177767376 小时前
React Native鸿蒙跨平台数据使用监控应用技术,通过setInterval每5秒更新一次数据使用情况和套餐使用情况,模拟了真实应用中的数据监控场景
开发语言·前端·javascript·react native·react.js·ecmascript·harmonyos
烬头88216 小时前
React Native鸿蒙跨平台应用实现了onCategoryPress等核心函数,用于处理用户交互和状态更新,通过计算已支出和剩余预算
前端·javascript·react native·react.js·ecmascript·交互·harmonyos
天人合一peng8 小时前
Unity中button 和toggle监听事件函数有无参数
前端·unity·游戏引擎
方也_arkling9 小时前
别名路径联想提示。@/统一文件路径的配置
前端·javascript
毕设源码-朱学姐9 小时前
【开题答辩全过程】以 基于web教师继续教育系统的设计与实现为例,包含答辩的问题和答案
前端
web打印社区9 小时前
web-print-pdf:突破浏览器限制,实现专业级Web静默打印
前端·javascript·vue.js·electron·html
RFCEO10 小时前
前端编程 课程十三、:CSS核心基础1:CSS选择器
前端·css·css基础选择器详细教程·css类选择器使用方法·css类选择器命名规范·css后代选择器·精准选中嵌套元素
Amumu1213810 小时前
Vuex介绍
前端·javascript·vue.js