vue keepAlive保持目前狀态

大家在做背景管理系統時候，編輯、詳情等頁面有時候需要通過路由跳轉顯示（沒有通過子元件顯示），這裡有的頁面需要儲存目前狀态，有的則不需要

需要保持狀态的：資料分頁查詢，點選詳情時，傳回需要跳到目前頁

不需要保持狀态的：更新資料，編輯資料，删除資料（對資料進行操作的時候）

我這裡是看别人的寫法，我這裡直接上幹貨（詳細版本的翻到最下面有原文位址）

1.

router.js

{
          path: '/index/table', // 測試用例 元件保持目前狀态 國際化時 測試用例
          name: 'table',
          component: resolve => require(['@/views/table/table'], resolve),
          meta: {
            child: false,
            hidden: false,
            icon: 'el-icon-tickets',
            localekey: 'table',
            keepAlive: true
          }
        },
           

将目前需要保持狀态的路由設定meta:{keepAlive:true}

2.

index.vue

<template>
<el-container class="container">
  <Aside />
  <el-container class="inner-container">
    <Header />
    <el-main class="main">
      <!--保持目前狀态 但防止編輯 注冊 等傳回時，資料未重新整理（在本項目中月曆會被一直保持）  需要在路由辨別 是否 保持目前狀态 并判斷-->
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive" />
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive" />
    </el-main>
    <el-footer class="footer">{{$t('message.footer')}}</el-footer>
  </el-container>
</el-container>
</template>
           

通過目前路由meta:{keepAlive:true}判斷,保持狀态的添加<keep-alive></keep-alive>

原文位址：https://zhuanlan.zhihu.com/p/54822855

預覽效果：https://github.com/iswtt/vue-cli4.0-init.git