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"
	},
相关推荐
lichenyang45311 分钟前
IPC、JSVM、UIThread、libuv:ASCF 架构图里最容易混的几个词
前端
用户0595401744614 分钟前
Redis记忆存储故障恢复测试踩坑实录:手动测试让我漏掉了2个一致性Bug
前端·css
用户21366100357217 分钟前
Vue2脚手架工程化与Axios集成
前端·vue.js
用户831348593069820 分钟前
Cesium实现黄昏效果:按钮一键控制打开/关闭黄昏效果,滑块拖动实时控制黄昏浓烈度
vue.js·cesium
我不是外星人23 分钟前
我把 Claude Code 搬到网页!自研高颜值 Web 交互工作台
前端·ai编程·claude
mixuecoding34 分钟前
零成本搭建全球科技热点情报站:12 个平台,6 小时,0 元
前端
用户0595401744639 分钟前
用了3年Mock,才发现Redis记忆存储的测试一直漏掉了60%的边界场景
前端·css
石小石Orz41 分钟前
AI具身交互:实现一个会说话的3D虚拟伴侣
前端·人工智能·后端
Muen1 小时前
iOS设计模式-外观Facade
前端
Cobyte1 小时前
21.Vue Vapor 组件的实现原理
前端·javascript·vue.js