Preface: Before there is a project, there are two kinds of access account, details page is a main page and N multiple pages, from the details page page request kepp – alive when you return to home page caching, soon the requirements with respect to ok, but the switch under the account and logged in to enter details page, return to the home page, incredibly is shown an account on the contents of the cache, Look for a long time, finally see net big guy write, solved this problem

1.keep-alive

keep-alive 

Is a built-in component of Vue that keeps state in memory during component switching, preventing repeated DOM rendering.

Usage:

1. Use it in combination with routes

keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if=! ""$route.meta.keepAlive"></router-view>
Copy the code

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello,
      meta: {
        keepAlive: false// No cache required}}, {path:'/page1',
      name: 'Page1',
      component: Page1,
      meta: {
        keepAlive: true// Need to cache}}]})Copy the code

2. Dynamic matching route (all components must be given name)

  • Include: string or regular expression. Only matching components are cached.
  • Exclude: indicates a string or regular expression. Any matching components will not be cached.

<keep-alive include="test-keep-alive"> <! -- set the cache name totest- Keep-alive components --> <component></component> </keep-alive> <keep-alive exclude="test-keep-alive"> <! -- will not cache name astest-keep-alive components --> <component></component> </keep-alive> <! --> <keep-alive :include="includedComponents">
  <router-view></router-view>
</keep-alive>

export default {
  name: 'test-keep-alive'.data () {
    return {
        includedComponents: "test-keep-alive"}}}Copy the code

3. Keep-alive life cycle

When keep-alive is introduced, the page is entered for the first time and the sequence of hooks is triggered:

Created -> Mounted -> activated: Deactivated is triggered upon exit. When re-entering (forward or backward), only activated is triggered.


4. Usage

  • The first page is page A
  • Page B is forwarded to page A. Page A needs to be cached
  • Page C is redirected to page A. Page A does not need to be cached

{
    path: '/',
    name: 'A',
    component: A,
    meta: {
        keepAlive: true// Need to be cached}}export default {
    data() {
        return{}; }, methods: {}, beforeRouteLeave(to, from, next) {// Set meta to. Meta. KeepAlive = for the next routetrue; // when B jumps to A, let A cache, i.e. not refresh next(); }};export default {
    data() {
        return{}; }, methods: {}, beforeRouteLeave(to, from, next) {// Set meta to. Meta. KeepAlive = for the next routefalse; // next(); // next(); }};Copy the code

5. Delete the keep-alive method

1. You can use this.$destroy() to destroy any keep-alive that exists on the page, but the keep-alive cache is not generated after this

2. Best method:

Just look at it and just copy and paste it. In this way, keep-alive will be deleted every time you log out.

Keep -alvie beforeRouteLeave:function(to, from, next){
      if(to.name=='Login'||to.name=='login') {if (this.$vnode && this.$vnode.data.keepAlive){
              if (this.$vnode.parent && this.$vnode.parent.componentInstance && this.$vnode.parent.componentInstance.cache){
                  if (this.$vnode.componentOptions){
                      var key = this.$vnode.key == null? this.$vnode.componentOptions.Ctor.cid + (this.$vnode.componentOptions.tag
                      ? `::${this.$vnode.componentOptions.tag}` : ' '): this.$vnode.key;
                      var cache = this.$vnode.parent.componentInstance.cache;
                      var keys  = this.$vnode.parent.componentInstance.keys;
                      if (cache[key]){
                          if (keys.length) {
                              var index = keys.indexOf(key);
                              if (index > -1) {
                                  keys.splice(index, 1);
                              }
                          }
                          delete cache[key];
                      }
                  }
              }
          }
      }
            // this.$destroy(a); next(); },Copy the code

3. With Vuex, the principle is to save the components that need to be cached each time, and then exit and clear.


With a few of own understanding and net big guy’s experience union, have a look good, welcome big guy complement and correct mistake

—– May everything and I be beautiful