Vue-那些年遇到的坑

发表于 更新于 分类于 阅读次数：

修改第三方组件

这里我们要重写第三方组件，但是不能直接重写，否则没有效果，解决方法如下：

1、重写第三方组件之后去掉<style scoped>中的scoped，但是这样会造成组件之间的样式污染。

2、去掉<style scoped>中的scoped之后，将本页面中所有样式包裹在一个class里面，避免污染其他页面。

3、使用/deep/穿透（推荐使用）。

deep穿透

vue引用了第三方组件，需要在组件中局部修改第三方组件的样式，而又不想去除scoped属性造成组件之间的样式污染。此时只能通过>>>，穿透scoped。

有些Sass 之类的预处理器无法正确解析 >>>。可以使用 /deep/ 操作符( >>> 的别名)。

用法如下：

1
2
3
4
5
6
7
8
9
<style scoped>

    /deep/  第三方组件 {

          样式

      }

</style>
修改第三方组件
  1. 打开vue页面，点击右键检查；
  2. 选中想要修改的组件，查看其样式，并将所有有关该组件的样式都复制粘贴到<style>中；
  3. 修改其中的属性值；
  4. 使用/deep/穿透。

重定向

打开router/index.js文件，添加如下代码：

1
2
3
4
5
{
  // 重定向
  path: '/',
  redirect: '/index'
}

将根地址重定向到/index。