vue---keep-alive

import Vue from 'vue'
import VueRouter from 'vue-router'


Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    name: 'Home',
    component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue'),
    children: [
      {
        path: '/aboutOther',
        name: 'AboutOther',
        component: () => import(/* webpackChunkName: "home" */ '../views/about/AboutOther'),

      },
      {
        path: '/bill',
        name: 'Bill',
        component: () => import(/* webpackChunkName: "home" */ '../views/bill/Bill'),

      },
    ]
  },

]

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

export default router

<template>
  <div class="home">
    home---home
    <div><button @click="change">change component</button></div>
    <!-- 仅仅 componentId为 About 和 Detail 组件有缓存，但是里面 About 和 Detail的子组件不受约束-->
    <keep-alive>
      <component :is="componentId"></component>
    </keep-alive>

  </div>
</template>

<script>
import About from './about/About'
import Detail from './detail/Detail'
export default {
  name: 'Home',
  data () {
    return {
      flag: true,
      componentId: "About"
    }
  },
  components: {
    About,
    Detail
  },
  methods: {
    change () {
      this.flag = !this.flag;
      this.flag ? this.componentId = "About" : this.componentId = "Detail"
    }
  }
}
</script>

• about组件

<template>
<!-- 虽然about组件被缓存，但是 aboutOther 和 bill 来回切换时，这两个子组件不会走缓存-->
  <div>
    about
    <router-link to="/aboutOther">to aboutOther</router-link> >
    <router-link to="/bill">to bill</router-link> >
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "About",
  components: {

  },
  props: {

  },
  data () {
    return {

    }
  },
  computed: {

  },
  created () {
    console.log('about---created');

  },
  activated () {
    console.log('about---activated');

  },
  mounted () {

  },
  watch: {

  },
  methods: {

  },
};
</script>

<style scoped>
</style>

• 我们发现对父组件使用keep-alive后，仅仅作用于父组件 About|Detail，About下的子组件aboutOther和bill来回切换不会受到keep-alive约束
• 当然若 keep-alive 只加在 子组件上，也仅仅在子组件本身相互切换时有效，当父组件销毁时，子组件即便有缓存也会跟着父销毁，从而重新created