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

這篇“vue中怎么監(jiān)聽url地址欄參數(shù)變化”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內(nèi)容，內(nèi)容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“vue中怎么監(jiān)聽url地址欄參數(shù)變化”文章吧。

vue監(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
                }
            }
        }
    }

vue檢測url的變化-Kaiqisan

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

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

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

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

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

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

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

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

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

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

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

以上就是關于“vue中怎么監(jiān)聽url地址欄參數(shù)變化”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關的知識內(nèi)容，請關注億速云行業(yè)資訊頻道。