项目背景:项目使用的是vue3.3.4,基于gitee开源代码开发的admin.ui.plus: 基于 vue3.x + CompositionAPI setup 语法糖 + typescript + vite + element plus + vue-router-next + pinia 技术,适配手机、平板、pc 的后台权限管理框架,希望减少工作量,帮助大家实现快速开发。问题描述:有a.vue、b.vue、c.vue(问题页面)三个页面,当一开始进入的是a.vue页面时页面页面正常渲染,a/b页面之间切换都是没有问题的,但是只要一切换到c.vue页面时,c.vue的第一次渲染会时成功的,控制台是没有报错的。但是,但你渲染完c.vue再切换到a/b.vue时,a/b.vue页面无法正常渲染,控制台不会出现报错。
问题原因:
<template>
<!--这里注释-->
<div>
test
</div>
</template>
在vue的template中只能包含一个div,这个东西许多人都是知道的但是在根结点的div上写注释,可能有这么一种情况,像我就觉得vue是不会去编译这个注释的,但是结果就会导致我上面所描述的问题。关键出现这个问题控制台是没有报错的,没有报错的原因应该不是vue的原因,也有可能是项目搭建的时候配置一些东西导致的。
问题解决:
<!--这里注释-->
<template>
<div>
test
</div>
</template>
当你需要对这个组件的功能进行注释说明时,应该将注释提取到template组件外面,这样vue就能正确识别到根结点的div。