問題描述
在做項目時斜纪，在管理后臺中有一個申請單管理模塊（帶分頁的）徘铝，可以查看用戶的申請狀態(tài)，點擊操作中詳情可以進(jìn)入詳情頁面奖年，詳情可以返回申請單列表细诸，詳情頁面是通過路由配置的，這個時候進(jìn)入詳情頁面申請單列表頁面會被銷毀陋守，當(dāng)我們通過router.go(-1),或者router.push() 再次進(jìn)入申請單列表頁面時震贵，會重新執(zhí)行 beforeCreate -> created -> beforeMount -> mounted ... 申請單列表的狀態(tài)都重新初始化，無法記錄進(jìn)入之前已經(jīng)選擇的分頁或者條件 水评。猩系。。
總結(jié)如下：
- 從詳情頁返回申請單記錄進(jìn)入詳情之前的狀態(tài)
- 從其他路由進(jìn)入不能記錄離開之前的狀態(tài)之碗，必須初始化為第一次進(jìn)入的狀態(tài)
解決辦法
網(wǎng)上一查一大堆解決方案蝙眶，但是自己嘗試一下了都不是很滿足，大概有以下幾種
- 通過keep-alive 設(shè)置include，自己項目里反正不起作用幽纷，我確信自己的組件內(nèi)部設(shè)置了 name 屬性 式塌，vue 版本2.5.2 （待解決）
<!-- App.vue-->
<template>
// :include="['ApplyManage']" include="ApplyManage" 這兩種寫法都沒有起作用
<keep-alive :include="['ApplyManage']">
<router-view></router-view>
<keep-alive>
</template>
- 通過設(shè)置路由meta字段keepAlive,通過這種方式設(shè)置確實可以實現(xiàn)詳情返回申請單列表記錄了上次狀態(tài)，但是又有一個新的問題友浸，從其他頁面進(jìn)入申請單列表記錄的還是上次退出申請單列表的狀態(tài)峰尝，這個就很不友好。收恢。武学。
// router.js，這里只是示例
const router = [
{
path:'/apply-list',
name:'ApplyManage',
component:() => import('@/views/ApplyManage'),
meta:{ title:'申請單列表', keepAlive:true }
},
{
path:'/apply-detail',
name:'ApplyDetail',
component:() => import('@/views/ApplyDetail'),
meta:{ title:'申請單詳情', keepAlive:true }
}
]
<!-- App.vue-->
<template>
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</template>
上面代碼已經(jīng)完成了我們大部分的功能伦意，我們在這個基礎(chǔ)上修改一下火窒，也就是退出申請單列表需要將申請單狀態(tài)重置，但是進(jìn)入詳情不重置驮肉。這個時候組件內(nèi)導(dǎo)航鉤子就配上用場了 beforeRouteEnter, beforeRouteLeave
// Home.vue
<script>
export default {
data(){
return{
isFirstEnter:false // 標(biāo)識是否第一次進(jìn)入
}
},
created(){
this.isFirstEnter = true
},
activated(){
// 緩存后只有這個鉤子和deactivated 運行熏矿，我們在這里判斷，只有第一次進(jìn)入或者是通過其他頁面返回不是詳情返回就重新調(diào)用數(shù)據(jù)
if(this.$route.meta.isBack || this.isFirstEnter) {
this.page.currentPage = 1
this.searchData()
}
this.$route.meta.isBack = false // 要進(jìn)入就要設(shè)置false
this.isFirstEnter = false // 必須要設(shè)置false,否則每次就重新刷新數(shù)據(jù)
},
methods:{
// 獲取申請單數(shù)據(jù)
searchData(){},
// 我這里添加這個鉤子是因為路由表是接口返回的离钝，接口返回數(shù)據(jù)沒有配置這個屬性票编，所以在代碼里加入
beforeRouteEnter(to,from,next){
to.meta.keepAlive = true
next() // 一定要調(diào)用
},
beforeRouteLeave(to,from,next){
if(to.name == 'ApplyDetail') {
from.meta.isBack = true
next()
}else{
// 如果是去其他頁面將申請單列表的isBack 設(shè)置為false,這樣第二次進(jìn)入就會進(jìn)入activated中判斷重新獲取數(shù)據(jù)，
form.meta.isBack = false
next()
}
}
}
}
</script>
