问题
this.$router.push()之后, url没有变化, 通过Vue-Devtools查看router, query参数已改变
直接上代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| changeSort(d) {
console.log(d)
let row = this.$route.query
row.currentSort = JSON.stringify(d) // 相当于 this.$route.query.currentSort = JSON.stringify(d)
this.$router
.push({
name: this.$route.name,
params: this.$route.params,
query: row
})
.then(
val => {
console.log(val);
},
error => {
console.log(error);
}
);
}
|
更改之后的代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| changeSort(d) {
console.log(d)
let row = JSON.parse(JSON.stringify(this.$route.query));
row.currentSort = JSON.stringify(d)
this.$router
.push({
name: this.$route.name,
params: this.$route.params,
query: row
})
.then(
val => {
console.log(val);
},
error => {
console.log(error);
}
);
}
|
出现问题原因
- 由于JavaScript对象为引用类型,
- row.currentSort = JSON.stringify(d) // 相当于 this.$route.query.currentSort = JSON.stringify(d)
- 调用router.push()Api判断路由对象相同, 所以不跳转