vue怎么實現動態改變地址欄的參數值

今天小編給大家分享一下vue怎么實現動態改變地址欄的參數值的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

動態改變地址欄的參數值

點擊切換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
                }
            }
        }
    }

以上就是“vue怎么實現動態改變地址欄的參數值”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。