vue緩存 keep-alive

1.app.vue中代碼

<template>
  <div id="app">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>
<script>
  export default {
    name: 'App',
  }
</script>

2.router.js中代碼

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const List = ()  => import('@/components/List/List')  // 分類列表
const Search = ()  => import('@/components/Index/Search')  // 搜索

const router = new Router({
  mode: 'history',
  routes: [
    { path: '/List',name: 'List', component: List, meta:{title:'分類列表',keepAlive: true}},//需要緩存的頁面
    { path: '/Search',name: 'Search', component: Search, meta:{title:'搜索'}},//不需要緩存的頁面
     //需要緩存的頁面把keepAlive設爲true，不需要的緩存的頁面不用寫就可以了
  ],

})

export default router