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