keep-alive

app.vue:

 

Need one ： When all pages jump to the home page , Cache all home pages （ Do not reload ） 

router/index.js:

 

Demand two ：list When you jump to the home page , Reload the homepage ;about When you jump to the home page , Home page does not reload

【 Implementation steps 】：

1. The route of the home page ： Get rid of the dead meta.keepAlive;

2. Inside other page components ： In the navigation guard when the page leaves , Dynamically add the target page keepAlive Value

router/index.js:

list.vue:

 about.vue:

  Now? , So let's verify that （ page mounted Hook printing 111）, Change the input box of the home page to ：zhang.

Click to list page , Then return to the home page , I found that the input box changed back ：zhangsan, And mounted Printed 111 Print again , explain ： Page reload , Not cached

  Then click about page , Then return to the home page , Find that the input box changes to ：zhang, And mounted Not executed again , explain ： Page not reloaded , Cached

 

app.vue:

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

    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

<style>
#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;
}

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

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