最近遇到這麼一個問題,就是想在當前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已有的話也是不行的。。。
反正就是這麼詭異。。。
不知道哪位大神能介紹下緣由