keep-alive是vue內置的一個組件，可以使被它包含的組件處于保留狀態，或避免被重新渲染。

<div>
    <keep-alive>
        <router-view></router-view><!-- 在這個里面的組件都會被緩存-->
    </keep-alive>
</div>

接下來讓我們來結合router緩存部分頁面
在App.vue中的設置

<template>
  <div id="app">
    <!-- 這里是跟組件 -->
        <!-- 加上緩存 -->
        <keep-alive>
            <router-view v-if="this.$route.meta.keep"></router-view>
        </keep-alive>
        <router-view v-if="!this.$route.meta.keep"></router-view>
  </div>
</template>

在router中增加配置meta
router中配置keep，需要緩存為ture，不需要為false

{
    path: '/shop_detail',
    name: 'shop_detail',
    component: shop_detail,
        meta:{
            keep:true  // keep(可隨意命名) true 表示頁面需要緩存
        }
},
{
     path: '/details',
     name: 'details',
     component: details,
         meta:{
            keep:false // keep(可隨意命名) false 表示頁面不需要緩存
    }
},