vue中如何監(jiān)聽(tīng)url地址欄參數(shù)變化
vue監(jiān)聽(tīng)url地址欄參數(shù)變化
問(wèn)題：
在開(kāi)發(fā)過(guò)程中我們有可能會(huì)遇到一個(gè)問(wèn)題，就是在一個(gè)vue項(xiàng)目中引入了一個(gè)組件，點(diǎn)擊這個(gè)組件跳轉(zhuǎn)的還是當(dāng)前的頁(yè)面，只是傳遞的參數(shù)發(fā)生了變化，這個(gè)時(shí)候我們傳遞的參數(shù)就不能正常的賦值了，這是因?yàn)轫?yè)面沒(méi)有重新加載，所以我們就要監(jiān)聽(tīng)地址欄的參數(shù)變化了。
1、傳遞參數(shù)
?? ?this.$router.push({
?? ? ? ?path: url,//路由地址
?? ? ? ?query:{//參數(shù)
?? ? ? ? ? ?type: 1
?? ? ? ?}
?? ?});2、監(jiān)聽(tīng)參數(shù)變化
?? ?watch: {
?? ? ? ?//監(jiān)聽(tīng)路由地址的改變
?? ? ? ?$route:{
?? ? ? ? ? ?immediate:true,
?? ? ? ? ? ?handler(){
?? ? ? ? ? ? ? ?if(this.$route.query.type){//需要監(jiān)聽(tīng)的參數(shù)
?? ? ? ? ? ? ? ? ? ?this.type = this.$route.query.type
?? ? ? ? ? ? ? ?}
?? ? ? ? ? ?}
?? ? ? ?}
?? ?}vue檢測(cè)url的變化-Kaiqisan
之前嘗試在vue中監(jiān)聽(tīng)路由變化，發(fā)現(xiàn)在vue中無(wú)法使用window.location來(lái)監(jiān)聽(tīng)，于是另外找了一種方法。
這個(gè)檢測(cè)不會(huì)去檢測(cè)域名，端口，協(xié)議的變化，只會(huì)檢測(cè)端口后面的內(nèi)容的變化，檢測(cè)路由的值和參數(shù)的值.
'$route': {
? ? handler(val) {
?? ??? ?console.log(val);
?? ?},
?? ?deep: true
?? ?// immediate: true
},在vue中去監(jiān)聽(tīng)$route就可以了，這里面包含了端口號(hào)后面的所有信息。
每一次跳轉(zhuǎn)路由都會(huì)監(jiān)聽(tīng)到路由的變化(甚至可以監(jiān)聽(tīng)錨的變化和參數(shù)的變化)，記得添加深度監(jiān)聽(tīng)(其實(shí)在watch里面，待監(jiān)聽(tīng)參數(shù)命名這里如果使用字符串—(’$route’)—的話就可以直接進(jìn)入深度監(jiān)聽(tīng))
PS：如果您只是想要監(jiān)聽(tīng)路由 單一部分 的變化的話，建議把監(jiān)聽(tīng)對(duì)象寫(xiě)得更加詳細(xì)一些，比如…
'$route.path'(val) {
? ? // ........
}
'$route.query'(val) {
? ? // ........
}雖然還是深度監(jiān)聽(tīng)，但是性能會(huì)大有提高。
最后測(cè)試的部分就交給大家了！
注意：建議把這個(gè)監(jiān)聽(tīng)方法放在一個(gè)所有頁(yè)面都會(huì)使用的公共組件上面，這樣就可以常駐地監(jiān)聽(tīng)而不會(huì)因?yàn)榻M件的切換而導(dǎo)致監(jiān)聽(tīng)的失效。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3結(jié)合ts從零實(shí)現(xiàn)vueuse的useRouteQuery方法
這篇文章主要為大家詳細(xì)介紹了如何使用vue3與ts從零實(shí)現(xiàn)一個(gè)類(lèi)vueuse的useRouteQuery方法,并解決vueuse的useRouteQuery方法存在的一些問(wèn)題,感興趣的可以了解下2024-03-03
element?ui組件中element.style怎么改詳解
element.style是一種內(nèi)聯(lián)樣式,一般都是代碼里寫(xiě)死的,下面這篇文章主要給大家介紹了關(guān)于element?ui組件中element.style怎么改的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
vue3實(shí)戰(zhàn)-子組件之間相互傳值問(wèn)題
這篇文章主要介紹了vue3實(shí)戰(zhàn)-子組件之間相互傳值問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
記錄--使用el-time-picker默認(rèn)值遇到的問(wèn)題
這篇文章主要介紹了記錄--使用el-time-picker默認(rèn)值遇到的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue終極性能優(yōu)化方案(解決首頁(yè)加載慢問(wèn)題)
最近在做項(xiàng)目中前端采用Vue技術(shù),發(fā)現(xiàn)首頁(yè)加載速度非常之慢,下面這篇文章主要給大家介紹了關(guān)于vue終極性能優(yōu)化方案,主要解決首頁(yè)加載慢問(wèn)題,需要的朋友可以參考下2022-02-02
vue3實(shí)現(xiàn)表格編輯和刪除功能的示例代碼
這篇文章主要為大家詳細(xì)介紹了vue3實(shí)現(xiàn)表格編輯和刪除功能的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
vue3+vite2中使用svg的方法詳解(親測(cè)可用)
vue2的時(shí)候使用的是字體圖標(biāo),缺點(diǎn)就是比較單一,到了vue3,相信瀏覽器的性能起來(lái),所以這里記錄一下,下面這篇文章主要給大家介紹了關(guān)于vue3+vite2中使用svg的相關(guān)資料,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue父子組件間引用之$parent、$children的相關(guān)知識(shí)，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05
Vue3+Element?Plus的項(xiàng)目搭建過(guò)程詳解
這篇文章主要為大家介紹了Vue3+Element?Plus的項(xiàng)目搭建過(guò)程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
vue組件講解(is屬性的用法)模板標(biāo)簽替換操作
這篇文章主要介紹了vue組件講解(is屬性的用法)模板標(biāo)簽替換操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09