Vue keepAlive page forced refresh method

KeepAlive page is forced to refresh

need

There is now a requirement that the browser is not refreshed, but the components in the route need to be refreshed

plan

Add the page name that requires keepAlive to the include of keep-live.

Vue's transition component has an after-enter hook event, which is called after the subcomponent is inserted and is just suitable for this scenario. In this hook, the current component is added to the keep-live include.

When refreshing, remove the name of the current component from keepAliveArr, and then use v-if to delete the router-view component, add the router-view back after the nextTick event to achieve the refresh of the component

Code

template

<transition @after-enter="afterRouterChange">
  <keep-alive :include="keepAliveArr">
    <router-view v-if="refreshControl" ref="child"/>
  </keep-alive>
</transition>
<button @click="refreshChild"></button>

script

export default {
  name: 'index',
  data () {
    return {
      keepAliveArr: [],
      refreshControl: true
    }
  },
  methods: {
    refreshChild () {
      // Remove first, then load, and force refresh the subpage      const name = this.$.$
      ((name), 1)
       = false
      this.$nextTick(() =&gt;  = true)
    },
    afterRouterChange () {
      // Record the subcomponent name, used for keepalive      const childName = this.$.$
      [].name = childName
      if (!(childName)) {
        (childName)
      }
    }
  }
}

Keep-alive cache page refresh

vue file keep-alive cache page refresh

Overview:

When vue development project, multiple pages need to be cached

Use scenarios:

For example: There are 4 pages, page 1, page 2, page 3, page 4

Require:

1. When jumping from 1-2-3-4 in sequence, the page is refreshed every time without cache;
2. When returning from 4-3-2-1 in sequence, the page will not be refreshed, and the cached page will be fetched in sequence;

Summarize:Both the outside and the inside need to be refreshed, and both the inside and the outside can be obtained for cached pages;

Implementation method: keep-alive, vuex, routing hook functions beforeRouteEnter, beforeRouteLeave

part

import Vue from 'vue';
import Vuex from 'vuex';
let storeModules = {};
(Vuex);
export default new ({
    state: {
        keepAlive: []
    },
    getters: {},
    mutations: {
        change_keepalive: (state, keepAlive) => {
             = keepAlive;
        }
    },
    actions: {},
    modules: storeModules
});

part

<template>
    <div>
        <keep-alive :include="$">
            <router-view></router-view>
        </keep-alive>
    </div>
</template>
<script>
export default {};
</script>

Use the include property of <keep-alive> to implement dynamic component caching.

Let's talk about the include property first, its values can be: string, regular expression, array

First of all, we need to know that keep-alive can match the name attribute of the corresponding component of the current route based on the value in include to determine whether the components in this route need to be cached.

3. Internal writing method of page 1

methods: {
     // Jump     goLink(){
         this.$('change_keepalive', ['Page 1','Page 2','Page 3']) 
         this.$({
             path:'/page 2',
         })
     }
 },
 beforeRouteEnter (to, from, next) {
    next(vm =&gt; {
      vm.$('change_keepalive', ['Page 1'])
    })
  }

4. Internal writing of page 2

beforeRouteEnter (to, from, next) {
    next(vm =&gt; {
      if (('Page 3') &gt; -1) {
          vm.$('change_keepalive', ['Page 1','Page 2'])
      }
    })
  },
  beforeRouteLeave (to, from, next) {
    if (('Page 3') &gt; -1) {
      this.$('change_keepalive', ['Page 1','Page 2', 'Page 3'])
    } else if (('Page 1')&gt;-1) {
      this.$('change_keepalive', ['Page 1'])　
    }
    next()
  }

5. Internal writing of page 3

beforeRouteEnter (to, from, next) {
    next(vm =&gt; {
      if (('Page 4') &gt; -1) {
          vm.$('change_keepalive', ['Page 1','Page 2', 'Page 3'])
      }
    })
  },
  beforeRouteLeave (to, from, next) {
    if (('Page 4') &gt; -1) {
      this.$('change_keepalive', ['Page 1','Page 2', 'Page 3'])
    } else if (('Page 2') &gt; -1) {
      this.$('change_keepalive', ['Page 1','Page 2'])　
    }
    next()
  }

6. Page 4

If you don’t need cache, you don’t need to add anything. Just write normally. If you need to add settings cache, you can add configuration according to the changes above.

Note:

where ('page x') in ('page x') is the path attribute of the router

Page x in this.$('change_keepalive', ['page 1','page 2']) is the name attribute of the component (not the routed name, but the name of the component)

&lt;script&gt;
    export default {
        name:'index',//Component name        components: {},
        props: {},
        data() {
            return {};
        },
        computed: {},
        watch: {},
        created() {},
        mounted() {},
        methods: {}
    }
&lt;/script&gt;```

Summarize

The above is personal experience. I hope you can give you a reference and I hope you can support me more.