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