vue如何實現(xiàn)動態(tài)改變地址欄的參數(shù)值
更新時間：2022年07月29日 15:46:43 作者：whylost迷心
這篇文章主要介紹了vue如何實現(xiàn)動態(tài)改變地址欄的參數(shù)值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
動態(tài)改變地址欄的參數(shù)值
點擊切換Tab，通過watch監(jiān)聽，在地址欄修改對應得active參數(shù)，這樣刷新后還能保持最后瀏覽的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));
? ? ? // 地址欄的參數(shù)值賦值
? ? ? newQuery.active = newValue;
? ? ? this.$router.push({ path, query: newQuery });
? ? }
? }
監(jiān)聽url地址欄參數(shù)變化
問題：
在開發(fā)過程中我們有可能會遇到一個問題，就是在一個vue項目中引入了一個組件，點擊這個組件跳轉(zhuǎn)的還是當前的頁面，只是傳遞的參數(shù)發(fā)生了變化，這個時候我們傳遞的參數(shù)就不能正常的賦值了，這是因為頁面沒有重新加載，所以我們就要監(jiān)聽地址欄的參數(shù)變化了。
1.傳遞參數(shù)
?? ?this.$router.push({
?? ? ? ?path: url,//路由地址
?? ? ? ?query:{//參數(shù)
?? ? ? ? ? ?type: 1
?? ? ? ?}
?? ?});2.監(jiān)聽參數(shù)變化
?? ?watch: {
?? ? ? ?//監(jiān)聽路由地址的改變
?? ? ? ?$route:{
?? ? ? ? ? ?immediate:true,
?? ? ? ? ? ?handler(){
?? ? ? ? ? ? ? ?if(this.$route.query.type){//需要監(jiān)聽的參數(shù)
?? ? ? ? ? ? ? ? ? ?this.type = this.$route.query.type
?? ? ? ? ? ? ? ?}
?? ? ? ? ? ?}
?? ? ? ?}
?? ?}以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
基于Vue實現(xiàn)后臺系統(tǒng)權限控制的示例代碼
本篇文章主要介紹了基于Vue實現(xiàn)后臺系統(tǒng)權限控制的示例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
這篇文章主要介紹了Vue3偵聽器的實現(xiàn)原理詳情，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-08-08
這篇文章主要介紹了vue使用@include或@mixin報錯的問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
本文主要介紹了vue3+pinia用戶信息持久緩存token的問題解決,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-07-07
這篇文章主要為大家介紹了Vue3使用Swiper實現(xiàn)輪播圖示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
Vue使用v-for數(shù)據(jù)渲染順序混亂的原因及解決方案
在 Vue.js 中,使用 v-for 指令進行數(shù)據(jù)渲染時,有時會遇到渲染順序混亂的問題,這種問題主要與 Vue 的響應式系統(tǒng)、DOM 更新機制以及數(shù)組的變更方法有關,以下是對這一現(xiàn)象的深入分析及解決方案,需要的朋友可以參考下2025-01-01
在本篇文章里小編給大家整理的是一篇關于vue3組件通信的方式總結及實例用法，對此有興趣的朋友們可以跟著學習下。2021-12-12
vant的Uploader?文件上傳,圖片數(shù)據(jù)回顯問題
這篇文章主要介紹了vant的Uploader?文件上傳,圖片數(shù)據(jù)回顯問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
與后端生成二維碼相比,前端生成二維碼更具有靈活性,下面這篇文章主要給大家介紹了關于Vue實現(xiàn)生成二維碼的簡單方式,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-01-01
解決vue 使用axios.all()方法發(fā)起多個請求控制臺報錯的問題
這篇文章主要介紹了解決vue 使用axios.all()方法發(fā)起多個請求控制臺報錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11