vue如何實現動態改變地址欄的參數值

Posted on by

動態改變地址欄的參數值

點擊切換Tab，通過watch監聽，在地址欄修改對應得active參數，這樣刷新後還能保持最後瀏覽的tab

watch: {
    active (newValue) {
      let query = this.$router.history.current.query;
      let path = this.$router.history.current.path;
      //對象的拷貝
      let newQuery = JSON.parse(JSON.stringify(query));
      // 地址欄的參數值賦值
      newQuery.active = newValue;
      this.$router.push({ path, query: newQuery });
    }
  }

監聽url地址欄參數變化

問題：

在開發過程中我們有可能會遇到一個問題，就是在一個vue項目中引入瞭一個組件，點擊這個組件跳轉的還是當前的頁面，隻是傳遞的參數發生瞭變化，這個時候我們傳遞的參數就不能正常的賦值瞭，這是因為頁面沒有重新加載，所以我們就要監聽地址欄的參數變化瞭。

1.傳遞參數

    this.$router.push({
        path: url,//路由地址
        query:{//參數
            type: 1
        }
    });

2.監聽參數變化

    watch: {
        //監聽路由地址的改變
        $route:{
            immediate:true,
            handler(){
                if(this.$route.query.type){//需要監聽的參數
                    this.type = this.$route.query.type
                }
            }
        }
    }

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。 

推薦閱讀：