實現場景：

當前頁面有不同的狀態切換，並且有相應的列表值。比如：淘寶的訂單列表頁面的佈局方式。有已發貨，待發貨，已收貨，全部訂單等。當點選已發貨下的訂單列表時，可以跳轉到訂單詳情頁面。當點選返回的時候，返回到已發貨/待發貨狀態下相應的列表位置。並且頁面不會發送請求。

實現原理：

官方文件指路

kee-alive是Vue內建的一個元件，可以使被包含的元件保留狀態，或避免重新渲染

實現方式：

1，APP.vue

<template>
  <div id="app" class="mescroll-touch" v-cloak>
    <keep-alive :include
 
="include">
      <!--  v-if="!$route.meta.keepAlive" -->
      <router-view></router-view>
    </keep-alive>
    <!-- <router-view v-if="!$route.meta.keepAlive"></router-view> -->
  </div>
</template>

在data裡定義一個欄位include:[],並且在watch裡監聽$route

 watch: {
      $route(to, from) {
        
 
// 如果要to(進入)的頁面是需要keepAlive快取的，把name push進include陣列中
        if (from.meta&&to.meta&&from.meta.deepth&&to.meta.keepAlive) {
          !this.include.includes(to.name) && this.include.push(to.name);
        }
        // 如果 要 form(離開) 的頁面是 keepAlive快取的，
        // 再根據 deepth 來判斷是前進還是後退
 

        // 如果是後退：
        if (from.meta&&to.meta&&from.meta.keepAlive && to.meta.deepth < from.meta.deepth) {
          const index = this.include.indexOf(from.name);
          index !== -1 && this.include.splice(index, 1);
        }
        // 如果回到了首頁，那麼快取為空
        if(to.meta.deepth==1){
          this.include=[]
        }
      }
  },

2，配置路由屬性，在router裡的index.js 裡定義屬性meta: { title: 'xxx',keepAlive:true,deepth:5},這裡注意name 值要跟頁面元件裡的name值保持一致，否則無效。關於

deepth的值 首頁 < 列表 < 詳情 這樣可以做到前進後退 區分要快取哪一頁。

 {
            name:'couponIndex',
            path:'/couponIndex',
            component: routerData.router.coupon_index,
            meta: { title: '卡券',deepth:4}
        },
        {
            name:'couponInfo',
            path:'/couponInfo',
            component: routerData.router.coupon_info,
            meta: { title: '卡券詳情',keepAlive:true,deepth:6}
        },
        {
            name:'couponList',
            path:'/couponList',
            component: routerData.router.coupon_list,
            meta: { title: '我的卡包',keepAlive:true,deepth:5}
        },

3，在couponList.vue 裡 定義name:"couponList；couponInfo.vue裡定義name:"couponInfo"。在meta裡定義keeplive:true 的頁面裡分別定義name值即可。