147 set whether to cache by using the routing meta information - use of include and exclude - use of activated and deactivated

Stop recording as follows ：

Home.vue Code ：

 About.vue Code ：

router/index.js Code ：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)
// meta Object can define some path related parameter configurations . It is called routing meta information 
//  Acquisition of route meta information attributes :   $route.meta. Property name 
// $route   When the routing object of the path 
// $router   The complete object of the route 
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: {
      num: 30,
      isKeep:true
    }
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
    meta: {
      num: 50,
      isKeep: false
    }
  },
  {
    path: '/user',
    component: () => import(/* webpackChunkName: "about" */ '../views/User.vue'),
    meta: {
      num: 50,
      isKeep: true
    }
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

 App.vue Code ：

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/user">User</router-link>
    </div>

    <!-- keep-alive  Do component level caching , The principle is :  Do not let components be destroyed and recreated -->

    <!-- demand :  /  With cache       /about  There is no cache  
     visit /  $route.meta.isKeep The value of is true, Two router-view Just show , Yes keep-alive the .  So there is cache 
     visit /about  $route.meta.isKeep The value of is false, Two router-view Only show no keep-alive the .  So there is no cache 
    -->
    <!-- <keep-alive>
      <router-view v-if="$route.meta.isKeep"/>
    </keep-alive>
    <router-view v-if="!$route.meta.isKeep"/> -->
    <!-- :include  Specify cached components  -->
    <keep-alive :include="['Home']">
      <router-view />
    </keep-alive>

    <!--  The values in the array , Is in the component name The value of the property  -->
    <!-- :exclude  Specify components without cache  -->
    <!-- <keep-alive :exclude="['Home']">
      <router-view />
    </keep-alive> -->
  </div>
</template>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  // text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>

  The effect is as follows ：