溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
1、在app中設置需要緩存的div
<keep-alive>//緩存的頁面 <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view>//不緩存的頁面
2、在路由router.js中設置.vue頁面是否需要緩存
{
path: '/home',
component: home,
meta: { keepAlive: true },//當前的.vue文件需要緩存
},
{
path: '/notice',
component: notice,//當前頁面不需要緩存
}
3、從緩存頁面跳轉到不緩存頁面，或者從不緩存頁面跳轉到緩存頁面的時候，會發現watch是不能監聽路由的，是因為緩存和不緩存頁面分別在不同的div里面，一個div里面是不可能監聽到另一個div的路由的，所有需要把監聽的路由都加上緩存（在路由添加 meta: { keepAlive: true }），路由在緩存頁面之間進行跳轉的時候，就可以通過監聽路由來進行判斷數據是否需要更新。
vue keep-alive 緩存后， 進入緩存頁需要再次更新
beforeRouteEnter (to, from, next) {
next (vm => {
vm.getData()
})
},
mounted: function () {
this.getData()
}
keep-alive 數據更新問題
在項目中使用<keep-alive>包含<router-view>實現頁面緩存，加速頁面加載，
同時，這種方式帶來一些弊端，請看如下大神解釋：
****************************************************************************
當引入keep-alive的時候，頁面第一次進入，鉤子的觸發順序created-> mounted-> activated，退出時觸發deactivated。
當再次進入（前進或者后退）時，只觸發activated。
****************************************************************************
這就帶來一個問題，之前在項目中使用mounted在頁面加載時獲取數據，使用<keep-alive>后方法不再生效，
根據上面的解釋，將mounted替換為activated即可。
以上這篇Vue2.0 實現頁面緩存和不緩存的方式就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
