vue路由跳转后页面样式错乱,刷新一下又好了的问题【已解决】

时间:2024-03-24 14:58:17

前言


如图所示,当我从profile页跳转回index页时,页面样式错乱:

vue路由跳转后页面样式错乱,刷新一下又好了的问题【已解决】
这是index页面一开始的样子,然后我们跳转到profile页面
vue路由跳转后页面样式错乱,刷新一下又好了的问题【已解决】
这是profile页面,然后我们再跳转回index页面
vue路由跳转后页面样式错乱,刷新一下又好了的问题【已解决】
这个时候问题就来了,可以明显的看到首页的样式被破坏了,那么为什么会这样呢?

思考


想了一下意识到,大概率是因为vue加载组件的时候,会把所有组件的css全部加载到一起,而这个时候样式是全局的,vue会偷懒不再渲染当前页面的样式

思路我们找到了,那么该如何解决呢?

解决


首先想到的是利用scoped来解决,在vue中引入了scoped这个概念,scoped的设计思想就是让当前组件的样式不会修改到其它地方的样式,使用了data-v-hash的方式来使css有了它对应模块的标识,这样写css的时候不需要加太多额外的选择器,方便很多。

其中,最核心的一点就是限定它的作用域只局限于当前页面,不会影响到其他页面

好的,说了这么多,那我们来使用一下scoped
vue路由跳转后页面样式错乱,刷新一下又好了的问题【已解决】
在index页面的style标签上加入scope
vue路由跳转后页面样式错乱,刷新一下又好了的问题【已解决】
然后,在profile页面的style标签上加入scope

验证


最后,我们来验证一下结果

vue路由跳转后页面样式错乱,刷新一下又好了的问题【已解决】
先是进入index页面
vue路由跳转后页面样式错乱,刷新一下又好了的问题【已解决】
然后跳转到profile页面
vue路由跳转后页面样式错乱,刷新一下又好了的问题【已解决】
再跳回来,我们可以看到样式没有被破坏,可以正常显示。

最后,如果本文对你有帮助的话,点个关注吧!