從列表頁 ------> 詳情頁， 再從詳情頁 -----> 列表頁 ，要保存上次已經加載的數據和自動還原上次的瀏覽位置

1. 緩存組件，vue2中提供了keep-alive。首先在我們的app.vue中定義keep-alive:

2. 下面在router.js即我們的路由文件中，定義meta信息

// news 是列表頁

{

path: '/news ',

name: 'news ',

component: resolve => require(['@/view/news'], resolve),

meta: {

keepAlive: true // 通過此字段判斷是否需要緩存當前組件

}

},

這里采用路由懶加載，也可以使用 import 來導入，無關緊要，接著看下面

2.緩存數據的實現

簡單了解一下緩存相關的vue鉤子函數。

設置了keepAlive緩存的組件：

第一次進入：beforeRouterEnter > created > … > activated->…->deactivated 后續進入時：beforeRouterEnter > activated > deactivated

可以看出，只有第一次進入該組件時，才會走created鉤子，而需要緩存的組件中activated是每次都會走的鉤子函數。所以，我們要在這個鉤子里面去判斷，當前組件是需要使用緩存的數據還是重新刷新獲取數據.

3. 頁面滾動位置的問題

我們知道，在vue這種單頁應用中，如果你在a頁面滾動了一段距離后，此時前往b頁面后，b頁面也會停留在a頁面的滾動位置。這個問題的解決，我們可以利用router本身提供的功能來解決：

routes: [

{

path: '/detail',

name: 'Detail',

component: resolve => require(['@/view/detail'], resolve)

}

],

scrollBehavior (to, from, savedPosition) {

if (savedPosition) {

return savedPosition

} else {

if (from.meta.keepAlive) {

from.meta.savedPosition = document.body.scrollTop;

}

return { x: 0, y: to.meta.savedPosition || 0 }

}

}

scrollBehavior是路由提供的基礎功能，這段函數寫的是：

如果通過瀏覽器自帶的前進后退按鈕切換的路由，那么會自動使用瀏覽默認的回滾上次頁面的瀏覽位置。

2.如果是通過vue路由進行的頁面切換。例如a前往b，首先判斷a是不是通過keep-alive緩存的組件，如果是，則在a路由的meta中添加一個savedPosition字段，并且值為a的滾動位置。最后return的是頁面需要回滾的位置。如此一來，如果打開一個頁面，該頁面的組件路由中meta.savedPosition為undefined的話，則頁面滾動到(0,0)的位置，這樣解決了問題1。那么如果打開一個頁面，它的路由的meta.savedPosition有值的話，則滾動到上次瀏覽的位置，因為meta.savedPosition保存的就是上次瀏覽的位置。

總結

以上是生活随笔為你收集整理的vue中的浏览量_vue中前进刷新、后退缓存用户浏览数据和浏览位置的实践的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。