在项目开始的时候，一股脑的热情把所有的代码都码好了，然后就开始测试各模块的功能。在页面跳转的时候总有几个页面，在跳到该页面时样式全错位了，但是刷新一下就又好。于是就打开浏览器查看在页面跳转时样式的变化，我发现有些页面，在跳转时页面的样式并没有加载，而是沿用了前一个页面的，或者前面已经加载过页面的样式。一开始觉得很奇怪，后来想了想，这是个单页面应用。是不是样式的id 或者 class 冲突了，一看果然是冲突了。要是同样的样式，前面已经加载过了，浏览器在跳到下个页面相同的样式就不会再加载了。在起名的时候可以自行区分，也可以根据官网的提示，

 

 

<style scoped>

@media (min-width: 250px) {

.list-container:hover {

background: orange;

}

}

</style>

这个可选 scoped 属性会自动添加一个唯一的属性 (比如 data-v-21e5b78) 为组件内 CSS 指定作用域，也就是给你定义的名字前加一串哈希值，编译的时候 .list-container:hover 会被编译成类似 .list-container[data-v-21e5b78]:hover。

 

还有就是本地环境和线上环境会存在差异，可以按f12自行去追踪，很快就会发现问题所在了

如果引入了外部框架，很可能用了全局css，可能会影响你的部分样式，通过审查元素去定位问题就可以了。

 

所以这点要注意一下，希望少踩点坑，自求多福，不过反过来想想，要是你没遇到，以后遇到了，同样无法解决。有可能还是时间比较急的项目，所有也不能说事件坏事

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue