页面跳转样式错位刷新又好了的情况_跳转路由,样式不生效,刷新才生效-程序员宅基地

技术标签: vue学习  css  

页面跳转样式错位,刷新又好了???

一、问题:

从一个页面返回到另外一个页面,样式出现了错位,但是刷新一下就好了。

二、原因:

在跳转时页面的样式并没有加载,而是保留了前面一个样式,或者前面已经加载过页面的样式,样式的id 或者 class 冲突了,也就是说很多页面都用到了相同的class和id属性,是一样的样式,再次跳转便不会进行变化。

三、解决方法:

1、在起名的时候注意一下,都给一个class,那么就可以最大程度避免属性相同问题。

2、在css里面进行scoped穿透,这样就会锁定到当前组件的样式,不会有冲突问题,原理:它的属性会自动添加一个唯一的属性 (data-v-21e5b78) 为组件内 CSS 指定作用域,也就是定义的名字前加一串哈希值,这个可以在终端看见,编译的时候 .list-container:hover 会被编译成类似 .list-container[data-v-21e5b78]:hover。

3、如果引入了外部框架,很可能用了全局css,可能会影响你的部分样式,通过终端审查元素去定位解决。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/rookie_0_0/article/details/116954634

智能推荐

认识Python-程序员宅基地

文章浏览阅读65次。认识Python人生苦短,我用 Python —— Life is short, you need Python01. Python 的起源Python 的创始人为吉多·范罗苏姆(Guido van Rossum)1. 1989 年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的解释程序,作为 ABC 语言的一种继承(感觉下什么叫牛人..._龟叔有多少身家

Docker容器技术介绍(三) --- Docker容器_docker create --help-程序员宅基地

文章浏览阅读953次。容器(Container)是Docker中最重要的概念之一,他是镜像的运行实体,是一个应用运行和所需运行环境的结合体。从现在开始,忘掉“臃肿”的虚拟机吧,对容器进行操作就跟直接操作应用一样简单、快速。docker createdocker create 命令可以用来创建一个容器,该命令支持的参数纷繁复杂,可以输入 docker create --help 来查看该命令的使用方法_docker create --help

JEESZ分布式框架简介-程序员宅基地

文章浏览阅读47次。项目核心代码结构截图jeesz-utils jeesz-config jeesz-framework jeesz-core-cmsjeesz-core-genjeesz-core-bookmark jeesz-core-actjeesz-core-oa jeesz-core-test jeesz-core-scheduler jeesz-core-taskjees..._jee框架是什么sz

表单输入框提示必填_前端刚进页面输入框就爆必填信息-程序员宅基地

文章浏览阅读2.1k次。在input标签里面增加required="true"属性即可。_前端刚进页面输入框就爆必填信息

Python 怎么打包代码和发布?_python 发布-程序员宅基地

文章浏览阅读2.4k次。Python 怎么打包代码和发布?_python 发布

两个单向循环链表的合并(带头结点)_合并单向循环链表la和lb。-程序员宅基地

文章浏览阅读5.1k次,点赞7次,收藏47次。两个单向循环链表的合并(带头结点)问题引入:已知两个带头结点的单向循环链表,LA和LB分别是链表的头指针,LA=(a1,a2…am),LB=(b1,b2,…bm),编写算法,将LA和LB合并成一个单项循环链表LC=(a1,a2…am,b1,b2,…bm)。核心算法:只需要修改两个表的表尾结点让两个表连起来即可。最后释放多余的LB这个头结点typedef struct node { DataType data; struct node *next;}*LSNode;//两个带头结点的单向循_合并单向循环链表la和lb。

随便推点

正则表达式校验url必须以http或https开头_js正则网址内容必输http-程序员宅基地

文章浏览阅读3.8w次。正则表达式校验url必须以http或https开头结合knockout.validation.js校验self.fieldName = ko.observable(initData.fieldName).extend({ required: { params: true }, minLength: 2, m..._js正则网址内容必输http

性能基础之速读【性能之巅:洞悉系统、企业与云计算】_重新传输的数据包 netstat-程序员宅基地

文章浏览阅读184次。引言综合来讲,这是一本介绍方法论的书,作者通过概念、模型、观测、实验手段来进行问题的剖析。另外本书的涉及范围之广,从内存、CPU、文件系统、存储硬件、网络等各个方面。并且本书通常以一个实例入手,深入的介绍系统原理,特别是在一些重点细节上,往往有超出一般的认识和方法。本书函盖范围太广,更适合作为工具书时常翻阅,所以在阅读过程中也关注自己当前需要的方面。第一章 绪论系统性能是对整个系统的研究,包括了所有的硬件组件和整个软件栈。所有数据路径上和软硬件上所发生的事情都包括在内,因为这些都有可能影响.._重新传输的数据包 netstat

视频教程-红帽RHCA架构师(云计算方向)-Ceph存储架构和管理-精讲-Linux-程序员宅基地

文章浏览阅读774次。红帽RHCA架构师(云计算方向)-Ceph存储架构和管理-精讲 10年Lin..._ceph125-rhcs3.0 pdf

2022完整iOS APP发布App Store上架流程指南_app store构建版本没有加号-程序员宅基地

文章浏览阅读9.5k次,点赞4次,收藏27次。iOS APP上架需要创建一个APP ID、申请iOS发布证书、再用iOS证书打包IPA,然后在上传IPA到App Store上架过程分七个步骤,按步骤一步步来,清晰了步骤就跟简单了_app store构建版本没有加号

js生成随机十六进制颜色_js随机产生一个16进制颜色-程序员宅基地

文章浏览阅读1.3k次。生成随机十六进制颜色 <script> function randomHexColor() { //随机生成十六进制颜色 var hex = Math.floor(Math.random() * 16777216).toString(16); //生成ffffff以内16进制数 while (hex.length < 6) { //wh_js随机产生一个16进制颜色

中断之中断向量表IDT的初始化_对中断向量表进行初始化-程序员宅基地

文章浏览阅读6k次。中断的初始化是在哪里完成的呢?是在start_kernel()中:512 trap_init();535 /* init some links before init_ISA_irqs() */536 early_irq_init();537 init_IRQ(); //最终调用native_init_IRQ,由它来完成主要工作。中断向量表的初始化_对中断向量表进行初始化

推荐文章

热门文章

相关标签