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

前言


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

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

思考


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

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

解决


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

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

好的,说了这么多,那我们来使用一下scoped
vue路由跳转后页面样式错乱,刷新一下又好了的问题_第4张图片
在index页面的style标签上加入scope
vue路由跳转后页面样式错乱,刷新一下又好了的问题_第5张图片
然后,在profile页面的style标签上加入scope

验证


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

vue路由跳转后页面样式错乱,刷新一下又好了的问题_第6张图片
先是进入index页面
vue路由跳转后页面样式错乱,刷新一下又好了的问题_第7张图片
然后跳转到profile页面
vue路由跳转后页面样式错乱,刷新一下又好了的问题_第8张图片
再跳回来,我们可以看到样式没有被破坏,可以正常显示。

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

你可能感兴趣的:(【Vue踩坑之路】)