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

前言如图所示，当我从profile页跳转回index页时，页面样式错乱：这是index页面一开始的样子，然后我们跳转到profile页面这是profile页面，然后我们再跳转回index页面这个时候问题就来了，可以明显的看到首页的样式被破坏了，那么为什么会这样呢？思考想了一下意识到，大概率是因为vue加载组件的时候，会把所有组件的css全部加载到一起，而这个时候样式是全局的，vu...

一如年少丶

9935人浏览 · 2020-05-04 00:28:24

一如年少丶 · 2020-05-04 00:28:24 发布

前言

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

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

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^