前言
如图所示，当我从profile页跳转回index页时，页面样式错乱：
这是index页面一开始的样子，然后我们跳转到profile页面
这是profile页面，然后我们再跳转回index页面
这个时候问题就来了，可以明显的看到首页的样式被破坏了，那么为什么会这样呢？
思考
想了一下意识到，大概率是因为 vue加载组件的时候，会把 所有组件的css全部加载到一起，而这个时候 样式是全局的， vue会偷懒不再渲染当前页面的样式
思路我们找到了，那么该如何解决呢？
解决
首先想到的是利用 scoped来解决，在 vue中引入了 scoped这个概念， scoped的设计思想就是让当前组件的样式不会修改到其它地方的样式，使用了 data-v-hash的方式来使 css有了它对应模块的标识，这样写 css的时候不需要加太多额外的选择器，方便很多。
其中，最核心的一点就是限定它的作用域只局限于当前页面，不会影响到其他页面
好的，说了这么多，那我们来使用一下scoped
在index页面的style标签上加入scope
然后，在profile页面的style标签上加入scope
验证
最后，我们来验证一下结果
先是进入index页面
然后跳转到profile页面
再跳回来，我们可以看到样式没有被破坏，可以正常显示。
最后，如果本文对你有帮助的话，点个关注吧！
5589
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
