最近遇到这么一个问题,就是想在当前url上添加一个动态的query传参。
听上去非常简单的一个功能,但是遇到的问题是很让人头大的。
一开始我的思路是这样的
let path = this.$route.path;
let query = this.$route.query
query.a = 'abc';
let location = {
path,
query
}
this.$router.push(location);
可是运行后 没有任何反应。。。也不报错。。
let path = this.$route.path;
let location = {
path,
query:{
a:'abc'
}
}
this.$router.push(location);
这样就没问题。。但是这样就不能保留原先已有的query了。。
所以我又做了一些尝试,把query直接做成字符串拼接起来
let path = this.$route.path;
let str = '?';
for (let i in query) {
str += i + '=' + query[i] + "&";
}
str = str.substr(0,str.length - 1);
this.$router.push(path + str);
依旧没有反应。。。
但是
let path = this.$route.path;
this.$router.push( path + '?a=a');
这样就是ok的。。。
索性放弃字符串拼接的方法接着研究一开始的思路,
默认先不获取已有的query,直接定义新的。
let path = this.$route.path;
let query = {
a:'a'
}
let location = {
path,
query
}
this.$router.push(location);
执行后发现正常。。。。
基于这个接着实验定义了query 在把 已有的query复制过来
let path = this.$route.path;
let query = this.$route.query;
query.a = 'abc';
let new_query = {};
for (let i in query){
new_query[i] = query[i];
}
let location = {
path,
query:new_query
}
this.$router.push(location);
执行后发现又不好使。。。
但是 给 new_query 默认声明的时候加个 属性就是ok的 。。。。
let path = this.$route.path;
let query = this.$route.query;
query.a = 'abc';
let new_query = {
b:'b'
};
for (let i in query){
new_query[i] = query[i];
}
let location = {
path,
query:new_query
}
this.$router.push(location);
…很懵逼为啥这样就好用了..
测试的时候还发现一个问题就是 new_query声明的属性是query已有的话也是不行的。。。
反正就是这么诡异。。。
不知道哪位大神能介绍下原因