问题描述

今天在优化VUE项目中的返回按钮，结果发现直接使用this.$router.replace('/')跳转到主页面，发现跳转A页面的背景色出现在了主页面里，样式出现了问题。

解决方法

在A页面中，<style>里添加scoped属性。

而这个属性的作用是让该部分的css样式只在当前页面加载。

scoped属性（可选属性）：会自动添加一个唯一的属性 (比如 data-v-21e5b78) 为组件内 CSS 指定作用域，即css样式只在当前页面加载^[1]

修改如下：

在<style>加了一个scoped

<style scoped>
  body {
    background: linear-gradient(180deg, #2a1b3d, #0f0f0f);
    color: #fff;
    padding:0;
  }
</style>

从控制台里可以看到给这部分css加了类似于id的名称。

涉及内容

<style>里添加scoped属性，属于vue-loader的内容了。^[2]

参考链接

[1] CSDN–vue 路由跳转，导致页面样式错乱，刷新又好了的情况

[2] vue-loader–有作用域的CSS

写文不易，如需转载，请注明出处。

如果某处写的有问题，欢迎留言，一起交流讨论，共同进步。