Preliminary use of 145 keep alive

Switch windows in web pages , Will execute , Component creation and destruction , Switch back to , Re create the component , At this time, the created component is in the initialization state .

for example ： If you are registering an account , I accidentally clicked another link , This page jumps to a new window , Click return at this time , The account registration page is recreated , The information you filled in before is gone .

keep-alive Is to help us solve this problem .

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

 

Here is the complete code App.vue：

<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>

Click to jump to the page , When you return to this page , The data of the page will not change .