vue切换路由页面数据缓存_Vue-Router实现前端页面缓存
一、使用情景
在使用Vue開發單頁面應用時，我們通常會使用Vue-Router進行頁面導航，Vue-Router在進行路由切換的時候，頁面是會重新加載，對應的生命周期函數也會再次執行一遍，但是在有些業務場景下，
比如：
在有分頁數據列表中，切換到第三頁需要查看列表對應數據的詳情頁面，然后返回，如果不加任何處理，列表頁面會重新加載，默認顯示第一頁數據，而不在是之前的第三頁，這樣如果還需要查看之前查看數據的下一條時，還需要切換到第三頁，如此反復。
在列表頁面進行條件篩選查詢，查詢到對應的數據后查詢詳情，跳轉詳情頁面，然后在返回，列表默認會清空查詢條件，顯示所有數據。
以上兩種情景都會帶來很不好的用戶體驗。此時，就需要對列表頁面進行路由緩存。在Vue-Router中可以使用keep-alive進行路由頁面緩存。
二、keep-alive基本認識
Vue中提供了一個內置組件keep-alive，使用元素將動態組件包裹起來，內部組件就會被緩存起來。
包裹的組件，加載過的頁面，再次進入時，是不會執行頁面第一次進入時的部分生命周期函數。
包裹的組件會新增兩個生命周期函數activated和deactivated.
兩個屬性include和exclude可以讓實現有條件的進行緩存。include包含的組件會被進行緩存，exclude包含的組件不會被緩存。
三、keep-alive實現路由頁面緩存
通過keep-alive實現路由頁面緩存有兩種如下兩種方式：
(一)、使用include控制需要緩存的頁面
// home.vue
...
export default{
data() {
return {
// 要緩存的組件
cashViews: ['list']
}
}
}
// list.vue
export default{
// 在組件內路由守衛鉤子函數中處理邏輯
beforeRouteEnter (to, from, next) {
if (from.name === 'Index') { // 處理頁面緩存后，返回首頁再次進入緩存頁時數據為更新
// 該生命周期無法獲取到this，因此把vm實例當作參數傳遞
next(vm => {
vm.pages.pageNum = 1
// 因為我這里查詢表單是動態的，所以首頁進入時需要調用一次，在改方法中請求返回后調用了獲取列表數據getTableDatas方法
vm.getQueryList()
})
} else if (!from.name) { // 處理刷新頁面時，獲取動態表單方法未執行，導致表單無法加載
next(vm => {
vm.getQueryList()
})
} else {
// 詳情返回時只更新列表數據，因為如果在詳情頁面做了操作，列表數據狀態會改變，其他使用緩存
next(vm => {
vm.getTableDatas()
})
}
}
}
以上實現，是針對我自己項目業務場景的實現，如果查詢表單不是動態獲取的，是頁面寫死的，可以在activated鉤子中調用查詢列表數據方法。這樣每次進入的緩存頁面的時候，只會更新列表數據，不會改變其他緩存。
問題：同樣會存在，列表緩存數據后，返回首頁，再次進入列表頁面，緩存數據還在，這樣可以在路由守衛beforeRouterLeave鉤子中處理。
activated() {
this.getTableDatas()
},
beforeRouterLeave(to, from, next) {
if (from.name === 'Index') {
// 如果從首頁進入時調用重置方法
this.reset()
}
}
兩點注意：
要緩存的路由組件必須設置name屬性，跟cashViews中的值對應；
如果要緩存的組件比較多時，可以使用vuex管理cashViews。
(二)、根據v-if控制顯示的router-view
在路由表routes中配置meta屬性，新增keepAlive屬性，需要緩存的頁面設置keepAlive為true.
{
path: '/list',
name: 'List',
component: List,
meta: {
keepAlive: true
}
}
根據當前訪問路由的keepAlive值控制是否緩存組件
// home.vue
...
在組件的守衛鉤子中修改keepAlive的值，控制頁面緩存與否
// List.vue
export default {
/* 從List組件離開時,修改keepAlive值為false，保證進入該頁面時頁面刷新
*/
beforeRouteLeave(to, from, next) {
from.meta.keepAlive = false
next()
}
}
// Detail.vue
export default {
/*從Detail返回List時，修改List的keepAlive為true,確保返回List頁面時使用緩存不刷新頁面
*/
beforeRouteLeave(to, from, next){
if(to.name === 'List') {
to.meta.keepAlive = true
}
next()
}
}
總結
以上是生活随笔為你收集整理的vue切换路由页面数据缓存_Vue-Router实现前端页面缓存的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 启动标志_牛股启动的标志：天衣无缝。
- 下一篇： Failed to get respon