1. 路由
1.1 跳转页面
开发中遇到需要在函数中实现页面跳转时,一般会使用this.$router.push。
使用
创建 a 标签来定义导航链接时,我们点击 时,这个方法会在内部调用,所以说,点击 等同于调用 router.push(…)。
那么若想要跳转时新开一个页面,而不是在原有页面中跳转,这时可以通过添加target=_blank属性:
1 | <router-link target="_blank" :to="home">新页面打开home页</router-link> |
编程式导航需要使用this.$router.resolve:
1 | let routeData = this.$router.resolve({ path: '/home', query: { id:id }}); |
1.2 路由传参
既然涉及到传参,也简单说明一下。
首先要清楚
this.$router:VueRouter 实例,有一系列对应的方法:router.push、 router.replace 和 router.go等。
this.$route:当前激活的路由信息对象。这个属性是只读的,里面的属性是 immutable (不可变) 的,不过你可以 watch (监测变化) 它,可以获取name、path、query、params等。
vue-router传参一般使用的是query和params,分别介绍两种方式。
1.2.1query方式传参和接收参数
1 | 传参: |
如果提供了path,params会被忽略:
1 | this.$router.push({ |
1.2.2params方式传参和接收参数1
2
3
4
5
6
7
8
9
10传参:
this.$router.push({
name:'xxx',
params:{
id:id
}
})
接收参数:
this.$route.params.id
手写完整的带有参数的 path:
1 | this.$router.push({ path: `/xxx/${id}` }) |
同样可以结合_blank新开页面传递参数,这里上面已经有示例了。
另外,使用query传参页面跳转的时候,可以在地址栏看到请求参数,而params传参时不会在地址栏中显示。
1.3 路由模式
最后还有一点,我觉得url上的#不好看想去掉于是设置了history模式,结果!!!!!跳转时新开页面报错404,在本地开发的时候没有问题,放到服务器上就报错,找了很久问题所在…………直到看了官方文档说是后端也需要配置,果然文档需要仔细看啊。以前觉得history就是用来去掉那个难看的#的,其实里面学问还挺多的。
2. 父子组件通信
父组件传入子组件的prop中的值是不允许改变的。
我是在父组件传递给子组件分页的当前页currentPage时遇到的,翻页的时候会触发事件给父组件,父组件在自己的方法中改变后再传递给子组件,但是子组件也触发了修改currentPage的事件想要修改props中的值。
报错:[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “currentPage” (found in component)
2.1 中间变量
一种方法用中间值替代:在data中使用一个中间变量,将其赋值为props的值,所有操作props值得地方都通过操作data中副本来实现,对父组件不做改变。
1 | //父组件HTML |
1 |
|
1 |
|
2.2 .sync修饰符
还可以使用.sync修饰符:
再次说明,要好好读文档。
3. filter与slot使用姿势
https://segmentfault.com/q/1010000015780925
过滤器可以用在两个地方:双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。
1 | <!-- 在双花括号中 --> |
这次遇到的是对table中的某个单元格进行过滤,并定义点击事件。
1 | <el-table-column prop="data" label="data" align="center"> |
在2.6.0中,我们为具名插槽和作用域插槽引入了一个新的统一的语法(即v-slot指令。它取代了slot和slot-scope这两个目前已被废弃但未被移除且仍在文档中的特性。