解決Vue Router給當前URL添加動態query無反應的問題

最近遇到這麼一個問題,就是想在當前url上添加一個動態的query傳參。
聽上去很是簡單的一個功能,可是遇到的問題是很讓人頭大的。
一開始個人思路是這樣的測試

let path = this.$route.path;
let query = this.$route.query
query.a = 'abc';
let location = {
    path,
    query
}
this.$router.push(location);

但是運行後 沒有任何反應。。。也不報錯。。this

let path = this.$route.path;
let location = {
    path,
    query:{
        a:'abc'
    }
}
this.$router.push(location);

這樣就沒問題。。可是這樣就不能保留原先已有的query了。。url

因此我又作了一些嘗試,把query直接作成字符串拼接起來code

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);

依舊沒有反應。。。router

可是字符串

let path = this.$route.path;
this.$router.push( path + '?a=a');

這樣就是ok的。。。io

索性放棄字符串拼接的方法接着研究一開始的思路,
默認先不獲取已有的query,直接定義新的。route

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的 。。。。query

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已有的話也是不行的。。。
反正就是這麼詭異。。。

不知道哪位大神能介紹下緣由

相關文章
相關標籤/搜索