vue中beforeRouteLeave實(shí)現(xiàn)頁面回退不刷新的示例代碼_第1頁
vue中beforeRouteLeave實(shí)現(xiàn)頁面回退不刷新的示例代碼_第2頁
vue中beforeRouteLeave實(shí)現(xiàn)頁面回退不刷新的示例代碼_第3頁
全文預(yù)覽已結(jié)束

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

第vue中beforeRouteLeave實(shí)現(xiàn)頁面回退不刷新的示例代碼路由切換返回前一個(gè)路由時(shí)實(shí)現(xiàn)頁面不刷新功能，首先想到的是keep-alive，但是頁面不屬于父子級(jí)關(guān)系，所以決定用beforeRouteLeave，下面貼代碼

beforeRouteLeave(to,from,next){

if(!=='page2'){

//判斷是從哪個(gè)路由過來的，如果不是page2過來的需要做什么操作在這里實(shí)現(xiàn)

//如果是page2過來的，表明當(dāng)前頁面不需要刷新獲取新數(shù)據(jù)，直接用之前緩存的數(shù)據(jù)即可

next();

beforeRouteLeave后面的參數(shù)to是關(guān)于上個(gè)頁面的信息，就是上個(gè)路由名稱。

這里有的人beforeRouteLeave方法無法觸發(fā)可能是因?yàn)樵趐age2頁面中路由跳轉(zhuǎn)寫了router.go(-1)，這里必須寫具體跳轉(zhuǎn)的路由名稱

this.$router.push({name:'xxx'});

PS:

最近才做了一個(gè)功能一個(gè)路由下面有兩個(gè)tab切換的頁面，互相切換的時(shí)候需要保持之前選的參數(shù)，其實(shí)tab本身是有這個(gè)功能的，但是這個(gè)需求切換的時(shí)候是需要像后臺(tái)發(fā)送請(qǐng)求，并且路由改變?cè)偾谢貋韰?shù)是要初始化的，所以想到了用beforerouteleave

beforerouteleave之前是一直聽聞這個(gè)東西并沒有用過，再網(wǎng)上看了，按照他們的用法并沒有效果

然后就自己試了一下結(jié)果成功了

看我的目錄結(jié)構(gòu)

下面的migrationPeople和personalMigration分別是tab切換里面的兩個(gè)內(nèi)容

index里面是寫tab切換的

我們只需要把beforeRouteLeave想寫vue生命周期一樣的寫法寫進(jìn)來就好了，至于參數(shù)to,from是什么就給路由守衛(wèi)是一樣的，感興趣的可以自己打印看一下

beforeRouteLeave(to,from,next){

if(sessionStorage.getItem('migrationPeopleDate')){

sessionStorage.removeItem('migrationPeopleDate')

if(sessionStorage.getItem('personalMigrationMan')){

sessionStorage.removeItem('personalMigrati

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論