Vue keepAlive頁面強(qiáng)制刷新方式

更新時(shí)間：2023年05月24日 15:41:13 作者：milugloomy

這篇文章主要介紹了Vue keepAlive頁面強(qiáng)制刷新方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

keepAlive頁面強(qiáng)制刷新

需求

現(xiàn)在有一個(gè)需求，要求不刷新瀏覽器，但要刷新路由中的組件

方案

將需要keepAlive的頁面name加入到keep-live的include中。

Vue的transition組件，有一個(gè)after-enter鉤子事件，待子組件插入完畢調(diào)用，正好適合這個(gè)場景，在這個(gè)鉤子中，將當(dāng)前組件添加到keep-live的include中。

在刷新時(shí)，從keepAliveArr中移除當(dāng)前組件的name，然后利用v-if刪除router-view組件，在nextTick事件后將router-view添加回來，實(shí)現(xiàn)組件的刷新

代碼

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 () {
? ? ? // 先移除，再加載，強(qiáng)制刷新子頁面
? ? ? const name = this.$refs.child.$options.name
? ? ? this.keepAliveArr.splice(this.keepAliveArr.indexOf(name), 1)
? ? ? this.refreshControl = false
? ? ? this.$nextTick(() => this.refreshControl = true)
? ? },
? ? afterRouterChange () {
? ? ? // 記錄子組件name，用于keepalive
? ? ? const childName = this.$refs.child.$options.name
? ? ? this.pageTabList[this.pageTabIndex].name = childName
? ? ? if (!this.keepAliveArr.includes(childName)) {
? ? ? ? this.keepAliveArr.push(childName)
? ? ? }
? ? }
? }
}

keep-alive緩存頁面刷新

vue文件keep-alive緩存頁面刷新

概述：

vue開發(fā)項(xiàng)目時(shí)，需要緩存多個(gè)頁面的情況

使用場景：

例如：現(xiàn)有4個(gè)頁面，頁面1，頁面2，頁面3，頁面4

要求：

1、從1-2-3-4依次跳轉(zhuǎn)時(shí)，每次都刷新頁面，不進(jìn)行緩存；
2、從4-3-2-1依次返回時(shí)，頁面不刷新，依次取緩存頁面；

總結(jié)：外到內(nèi)都需要刷新，內(nèi)到外皆獲取緩存頁面；

實(shí)現(xiàn)方式：keep-alive、vuex、路由鉤子函數(shù)beforeRouteEnter、beforeRouteLeave

1.vuex部分

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

2.app.vue部分

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

使用<keep-alive>的include屬性，來實(shí)現(xiàn)動(dòng)態(tài)的組件緩存。

先說一下include屬性，它的值可以是：字符串，正則表達(dá)式，數(shù)組

首先我們需要知道keep-alive可以根據(jù)include中的值來匹配當(dāng)前路由對應(yīng)組件的name屬性，來判斷這個(gè)路由中的組件是否需要緩存。

3.頁面1內(nèi)部寫法

methods: {
? ? ?// 跳轉(zhuǎn)
? ? ?goLink(){
? ? ? ? ?this.$store.commit('change_keepalive', ['頁面1','頁面2','頁面3'])?
? ? ? ? ?this.$router.push({
? ? ? ? ? ? ?path:'/頁面2',
? ? ? ? ?})
? ? ?}
?},
?beforeRouteEnter (to, from, next) {
? ? next(vm => {
? ? ? vm.$store.commit('change_keepalive', ['頁面1'])
? ? })
? }

4.頁面2內(nèi)部寫法

beforeRouteEnter (to, from, next) {
? ? next(vm => {
? ? ? if (from.path.indexOf('頁面3') > -1) {
? ? ? ? ? vm.$store.commit('change_keepalive', ['頁面1','頁面2'])
? ? ? }
? ? })
? },
? beforeRouteLeave (to, from, next) {
? ? if (to.path.indexOf('頁面3') > -1) {
? ? ? this.$store.commit('change_keepalive', ['頁面1','頁面2', '頁面3'])
? ? } else if (to.path.indexOf('頁面1')>-1) {
? ? ? this.$store.commit('change_keepalive', ['頁面1'])　
? ? }
? ? next()
? }

5.頁面3內(nèi)部寫法

beforeRouteEnter (to, from, next) {
? ? next(vm => {
? ? ? if (from.path.indexOf('頁面4') > -1) {
? ? ? ? ? vm.$store.commit('change_keepalive', ['頁面1','頁面2', '頁面3'])
? ? ? }
? ? })
? },
? beforeRouteLeave (to, from, next) {
? ? if (to.path.indexOf('頁面4') > -1) {
? ? ? this.$store.commit('change_keepalive', ['頁面1','頁面2', '頁面3'])
? ? } else if (to.path.indexOf('頁面2') > -1) {
? ? ? this.$store.commit('change_keepalive', ['頁面1','頁面2'])　
? ? }
? ? next()
? }

6.頁面4

不需要緩存則無需添加任何東西，正常書寫即可，如需添加設(shè)置緩存，則按照上方更改添加配置即可。

注：

其中from.path.indexOf('頁面x')中頁面x為router的path屬性

this.$store.commit('change_keepalive', ['頁面1','頁面2'])中的頁面x為組件的name屬性（不是路由的name，是組件的name）

<script>
? ? export default {
? ? ? ? name:'index',//組件name
? ? ? ? components: {},
? ? ? ? props: {},
? ? ? ? data() {
? ? ? ? ? ? return {};
? ? ? ? },
? ? ? ? computed: {},
? ? ? ? watch: {},
? ? ? ? created() {},
? ? ? ? mounted() {},
? ? ? ? methods: {}
? ? }
</script>```