欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue中如何監(jiān)聽url地址欄參數(shù)變化

 更新時(shí)間：2023年03月10日 10:49:47   作者：Right atrium  
這篇文章主要介紹了vue中如何監(jiān)聽url地址欄參數(shù)變化問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue監(jiān)聽url地址欄參數(shù)變化

問題：

在開發(fā)過程中我們有可能會(huì)遇到一個(gè)問題，就是在一個(gè)vue項(xiàng)目中引入了一個(gè)組件，點(diǎn)擊這個(gè)組件跳轉(zhuǎn)的還是當(dāng)前的頁面，只是傳遞的參數(shù)發(fā)生了變化，這個(gè)時(shí)候我們傳遞的參數(shù)就不能正常的賦值了，這是因?yàn)轫撁鏇]有重新加載，所以我們就要監(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
?? ? ? ? ? ? ? ?}
?? ? ? ? ? ?}
?? ? ? ?}
?? ?}

vue檢測url的變化-Kaiqisan

之前嘗試在vue中監(jiān)聽路由變化，發(fā)現(xiàn)在vue中無法使用window.location來監(jiān)聽，于是另外找了一種方法。

這個(gè)檢測不會(huì)去檢測域名，端口，協(xié)議的變化，只會(huì)檢測端口后面的內(nèi)容的變化，檢測路由的值和參數(shù)的值.

'$route': {
? ? handler(val) {
?? ??? ?console.log(val);
?? ?},
?? ?deep: true
?? ?// immediate: true
},

在vue中去監(jiān)聽$route就可以了，這里面包含了端口號后面的所有信息。

每一次跳轉(zhuǎn)路由都會(huì)監(jiān)聽到路由的變化(甚至可以監(jiān)聽錨的變化和參數(shù)的變化)，記得添加深度監(jiān)聽(其實(shí)在watch里面，待監(jiān)聽參數(shù)命名這里如果使用字符串—(’$route’)—的話就可以直接進(jìn)入深度監(jiān)聽)

PS：如果您只是想要監(jiān)聽路由 單一部分 的變化的話，建議把監(jiān)聽對象寫得更加詳細(xì)一些，比如…

'$route.path'(val) {
? ? // ........
}

'$route.query'(val) {
? ? // ........
}

雖然還是深度監(jiān)聽，但是性能會(huì)大有提高。

最后測試的部分就交給大家了！

注意：建議把這個(gè)監(jiān)聽方法放在一個(gè)所有頁面都會(huì)使用的公共組件上面，這樣就可以常駐地監(jiān)聽而不會(huì)因?yàn)榻M件的切換而導(dǎo)致監(jiān)聽的失效。

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論