vue中keepAlive的用法[返回頁面不刷新]

本文轉載於時間蒼白了誓言_49b9
使用vue單頁開發項目時遇到一個問題：在列表頁進入詳情頁，按返回鍵返回列表頁時頁面刷新了，用戶體驗非常差啊！！！查閱了一下相關問題，使用 解決這個問題，下面是我的使用心得。

是Vue的內置組件，能在組件切換過程中將狀態保留在內存中，防止重復渲染DOM。

1.在app.vue頁面中把 替換成下圖所示：

<keep-alive>
      <router-view v-if="$route.meta.keepLive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepLive"></router-view>

2.在router中的index.js中，路由配置下加一個meta屬性：

{
      path: '/',
      component: () => import(/* webpackChunkName: 'day-report' */ './views/index.vue'),
      meta: {
        keepLive: !0
      }
    },

我的需求是，列表頁面到列表詳情頁跳轉后，從詳情頁回來之后，列表頁面不刷新

注意：哪個頁面需要緩存，哪個頁面加上就行，不需要的不用寫

3.在列表詳情頁，加入下圖所示內容：

注意：下面內容加上之后，想要的效果是實現了，但是出現另一個問題，就是無論哪個頁面跳到這個列表頁面，都不會刷新，顯然和所要求的不同。所以需要第四步：

beforeRouteLeave(to, from, next) {
    if (to.path === '/') {
      if (!from.meta.keepLive) {
        from.meta.keepLive = !0;
      }
    } else {
      from.meta.keepLive = !1;
      to.meta.keepLive = !1;
      this.$destroy();
    }
    next();
  },

4.在列表頁加入如下圖所示：

需要判斷下，如果頁面來源是詳情頁的話，就緩存，

否則，就不緩存，刷新。

beforeRouteLeave(to, from, next) {
    if (to.path === '/day') {
      from.meta.keepLive = !0;
    } else {
      from.meta.keepLive = !1;
      this.$destroy();
    }
    next();
  },

beforeRouterLeave必須寫在有配置路由的頁面上才有效的。具體使用方法，可以參考官方文檔。