您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“vue路由監(jiān)聽事件跳轉(zhuǎn)的問題怎么解決”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“vue路由監(jiān)聽事件跳轉(zhuǎn)的問題怎么解決”吧!
watch: { $route: function clearSelectionRow() { console.log("success"); this.$emit("setSelectionFile", []); }, }
代碼實(shí)現(xiàn)功能:當(dāng)本頁面路由發(fā)生變化的時(shí)候,執(zhí)行回調(diào)函數(shù)clearSelectionRow();
①$route后接函數(shù),函數(shù)可以是現(xiàn)定義的,也可以是在methods方法中已經(jīng)定義完成的;
②監(jiān)聽watch封裝在最底層的組件的時(shí)候,注意跳轉(zhuǎn)后該組件是否摧毀重建;如果被摧毀重建,路由監(jiān)聽觸發(fā)事件將不執(zhí)行,摧毀重建:一個(gè)組件調(diào)用兩次分別顯示,在頁面上無區(qū)別,但是是同意組件的再次渲染,定義在該組件上的路由變化將監(jiān)聽不到。
解決方法:將路由監(jiān)聽放在一直不變的主頁面index.vue上.
③當(dāng)需要在同一屬性下執(zhí)行多個(gè)回調(diào)函數(shù)的時(shí)候,將函數(shù)以對(duì)象的形式放在數(shù)組中
$route: [ function clearSelectionRow() { //回調(diào)函數(shù)1 this.$emit("setSelectionFile", []); }, {//回調(diào)函數(shù)2 handler(route) { }, ],
最近在使用vue項(xiàng)目的時(shí)候發(fā)現(xiàn)我們使用的watch監(jiān)聽不到$route的變化,查了很多文檔最終終于找到解決辦法。
路由包含子路由
{ name: 'home', component: Home, path: '/home', children: [ { path: 'main', name: 'main', component: Main, }, { path: 'login', name: 'login', component: Login, }, ] }
在幾個(gè)子路由之間跳轉(zhuǎn)就能保證監(jiān)聽到路由變化
監(jiān)聽$route.path對(duì)象
watch: { "$route.path":{ handler(to, from) { console.log('to:::', to); console.log('from:::', from); }, deep: true } }
如果我們的路由沒有子路由,想要實(shí)現(xiàn)監(jiān)聽可以使用$route.path進(jìn)行深度監(jiān)聽,這樣也能監(jiān)聽到路由變化了。
使用vue自帶的路由守衛(wèi)beforeRouteEnter ,beforeRouteUpdate ,beforeRouteLeave
beforeRouteEnter (to, from, next) { next(vm => { // 通過 `vm` 訪問組件實(shí)例 }) }, beforeRouteUpdate (to, from, next) { }, beforeRouteLeave (to, from, next) { }
到此,相信大家對(duì)“vue路由監(jiān)聽事件跳轉(zhuǎn)的問題怎么解決”有了更深的了解,不妨來實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。