您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)怎么在vue中利用beforeRouteLeave實(shí)現(xiàn)頁(yè)面回退不刷新,文章內(nèi)容質(zhì)量較高,因此小編分享給大家做個(gè)參考,希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。
beforeRouteLeave(to, from, next){ if(to.name !== 'page2'){ //判斷是從哪個(gè)路由過(guò)來(lái)的,如果不是page2過(guò)來(lái)的需要做什么操作在這里實(shí)現(xiàn) //如果是page2過(guò)來(lái)的,表明當(dāng)前頁(yè)面不需要刷新獲取新數(shù)據(jù),直接用之前緩存的數(shù)據(jù)即可 } next(); }
beforeRouteLeave后面的參數(shù)to是關(guān)于上個(gè)頁(yè)面的信息,to.name就是上個(gè)路由名稱。
這里有的人beforeRouteLeave方法無(wú)法觸發(fā)可能是因?yàn)樵趐age2頁(yè)面中路由跳轉(zhuǎn)寫了router.go(-1) ,這里必須寫具體跳轉(zhuǎn)的路由名稱
this.$router.push({name:'xxx'});
PS:
最近才做了一個(gè)功能一個(gè)路由下面有兩個(gè)tab切換的頁(yè)面,互相切換的時(shí)候需要保持之前選的參數(shù),其實(shí)tab本身是有這個(gè)功能的,但是這個(gè)需求切換的時(shí)候是需要像后臺(tái)發(fā)送請(qǐng)求,并且路由改變?cè)偾谢貋?lái)參數(shù)是要初始化的,所以想到了用beforerouteleave
beforerouteleave之前是一直聽(tīng)聞這個(gè)東西并沒(méi)有用過(guò),再網(wǎng)上看了,按照他們的用法并沒(méi)有效果
然后就自己試了一下結(jié)果成功了
看我的目錄結(jié)構(gòu)
下面的migrationPeople和personalMigration分別是tab切換里面的兩個(gè)內(nèi)容
index里面是寫tab切換的
我們只需要把beforeRouteLeave想寫vue生命周期一樣的寫法寫進(jìn)來(lái)就好了,至于參數(shù)to,from是什么就給路由守衛(wèi)是一樣的,感興趣的可以自己打印看一下
beforeRouteLeave(to,from,next){ if(sessionStorage.getItem('migrationPeopleDate')){ sessionStorage.removeItem('migrationPeopleDate') } if(sessionStorage.getItem('personalMigrationMan')){ sessionStorage.removeItem('personalMigrationMan') } next() },
關(guān)于怎么在vue中利用beforeRouteLeave實(shí)現(xiàn)頁(yè)面回退不刷新就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。