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

vue

如图所示，当我从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页面

再跳回来，我们可以看到样式没有被破坏，可以正常显示。

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