关于新手入坑vue，页面跳转样式错位刷新又好了的情况

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

@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，可能会影响你的部分样式，通过审查元素去定位问题就可以了。

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

关于新手入坑vue，页面跳转样式错位刷新又好了的情况相关推荐

vue页面跳转后返回原页面初始位置
vue页面跳转到新页面之后,再由新页面返回到原页面时候若想返回调出原页面的初始位置,怎么来解决这个问题呢?首先我们应该在跳出页面时候记录下跳出的scrollY,返回原页面的时候在设置返回位置为记录下的 ...
Vue页面跳转后不显示问题
Vue页面跳转后不显示问题必须要添加 path前面要有/
vue页面跳转数据传递
vue页面跳转数据传递方法一: 第一页跳转赋值: toParameter:function(row) { this.$router.push({ path:'cardParameter', ...
[摘抄] 资深软件项目经理/产品经理“扯皮技巧”汇总(新手入坑必读，不定期更新)...
左耳朵耗子 (陈皓):<开发团队的效率> http://coolshell.cn/articles/11656.html (介绍并点评了)以下几种典型的开发方式(以及他们在实践中难以避免的 ...
魔兽世界服务器存档位置,选择服务器也有大学问？新手入坑《魔兽世界》该在哪里“扎根”...
原标题:选择服务器也有大学问?新手入坑<魔兽世界>该在哪里"扎根" <魔兽世界:暗影国度>开服至今已经五个多月了,圈内圈外都在讨论新版本的话题,不少萌新与老 ...
新手入坑GMSSL（三）GMSSL双证书与360国密浏览器通讯
首先申明,我不是密码学的专业人员,没有这方面知识基础,这个以及接下来的博客都是我根据网上能找到的资料.博客,一点点摸索总结出来的.但项目必须得做身不由己,无奈只能自己试一试了. 如果有哪里不对的地方, ...
VUE路由跳转后自动刷新一次页面
VUE路由跳转后自动刷新一次页面我们在前端开发时有时会遇到一些问题,暂时找不到解决办法只有靠刷新才能救一下.可是又不能每次都手动刷新.在网上找了很久的自动刷新办法,发现大部分都是路由跳转类的刷新,和 ...
Vue 页面跳转到指定位置
Vue 页面跳转到指定位置页面跳转页面 script style 进阶版:随着页面滚动变换导航菜单样式监听页面滚动方法销毁滚动页面跳转页面 <template><div ...
vue里面怎么实现页面跳转_vue页面跳转如何实现 vue页面跳转实现代码
vue页面跳转如何实现?本篇文章小编给大家分享一下vue页面跳转实现代码,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. 一.this.$router. ...
入坑VUE的一点心得
前言本人专业做后台,有一定前端基础,最近想不通学了几天VUE,由于入坑过程有点小心酸, 想想还是记下来吧,一则是总结,说的不一定对,再则看看能不能给后入坑的人一点帮助吧 1.关键地址,具体作用后面会 ...

关于新手入坑vue，页面跳转样式错位刷新又好了的情况

关于新手入坑vue，页面跳转样式错位刷新又好了的情况相关推荐

最新文章

热门文章