Vue2.0 實(shí)現(xiàn)頁面緩存和不緩存的方式

發(fā)布時(shí)間：2020-08-19 13:48:48 來源：腳本之家閱讀：488 作者：蝸牛速度額欄目：web開發(fā)

1、在app中設(shè)置需要緩存的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中設(shè)置.vue頁面是否需要緩存

{
  path: '/home',
  component: home,
  meta: { keepAlive: true },//當(dāng)前的.vue文件需要緩存
},
{
  path: '/notice',
  component: notice,//當(dāng)前頁面不需要緩存
}

3、從緩存頁面跳轉(zhuǎn)到不緩存頁面，或者從不緩存頁面跳轉(zhuǎn)到緩存頁面的時(shí)候，會(huì)發(fā)現(xiàn)watch是不能監(jiān)聽路由的，是因?yàn)榫彺婧筒痪彺骓撁娣謩e在不同的div里面，一個(gè)div里面是不可能監(jiān)聽到另一個(gè)div的路由的，所有需要把監(jiān)聽的路由都加上緩存（在路由添加 meta: { keepAlive: true }），路由在緩存頁面之間進(jìn)行跳轉(zhuǎn)的時(shí)候，就可以通過監(jiān)聽路由來進(jìn)行判斷數(shù)據(jù)是否需要更新。

vue keep-alive 緩存后，進(jìn)入緩存頁需要再次更新

beforeRouteEnter (to, from, next) {
 next (vm => {
   vm.getData()
 })
},
 mounted: function () {
  this.getData()
}

keep-alive 數(shù)據(jù)更新問題

在項(xiàng)目中使用<keep-alive>包含<router-view>實(shí)現(xiàn)頁面緩存，加速頁面加載，

同時(shí)，這種方式帶來一些弊端，請看如下大神解釋：

****************************************************************************

當(dāng)引入keep-alive的時(shí)候，頁面第一次進(jìn)入，鉤子的觸發(fā)順序created-> mounted-> activated，退出時(shí)觸發(fā)deactivated。

當(dāng)再次進(jìn)入（前進(jìn)或者后退）時(shí)，只觸發(fā)activated。

****************************************************************************

這就帶來一個(gè)問題，之前在項(xiàng)目中使用mounted在頁面加載時(shí)獲取數(shù)據(jù)，使用<keep-alive>后方法不再生效，

根據(jù)上面的解釋，將mounted替換為activated即可。

以上這篇Vue2.0 實(shí)現(xiàn)頁面緩存和不緩存的方式就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

Vue2.0 實(shí)現(xiàn)頁面緩存和不緩存的方式

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽