vue使用scoped 实现样式只在当前界面生效，解决样式污染的

vue开发中经常会用到这种情况：
A页面有类选择器 name_box,B界面也设置了name_box，注意到没有，这两个类选择器名字一模一样。
当A界面push到B界面的时候，查看B界面的元素，会有一个特别奇怪的现象：你会发现A界面的样式也会应用到B界面上。只是会由于权重的关系，两个name_box中 重叠的样式，权重高的会生效。两个name_box中不重叠的样式，都会生效。

对以上问题详细举个例子，例如：

• A界面的类选择器

.name_box{
font-size:18px;
background-color:red;
}

• B界面的类选择器

.name_box{
 background-color:blue;
}

那么最终B界面name_box的样式为，字号18px背景颜色为蓝色。但是我们明明只是想设置背景颜色为蓝色，不要设置字号。

解决办法1：

A和B类选择器名字不要一样。

解决办法2：使用scoped实现，样式只在当前界面生效，解决以上样式污染的问题

以B界面为例

<style scoped>
 .name_box{
   background-color:blue;
 }
</style>

总结：对比两个解决办法，当然是使用scoped修饰style来解决以上问题是最合理的。因为你不用再顾虑写一个类选择器的时候，想想其余页面是否也有该类选择器，类选择器一样的话会冲突的问题了。