版本号:
vue/cli:4.5.12
需求:
- A, B, C三个页面,其中B页面缓存 A=>B刷新;
- B=>C,然后C=>B不刷新;
- B=>A,然后A=>B刷新;
- B=>D,然后D=>B根据B携带的参数判断是否让B刷新
这种情况很多,页面虽然缓存了,但是很多情况都需要刷新,所以浏览了很多文章感觉这个写的是最适用于我的。vue3.0刷新页面、刷新组件(provide / inject在setup里使用)
我也做一下在自己项目中具体使用的记录~
使用:
App.vue
<template>
<router-view v-slot="{ Component }">
<keep-alive :max="10" v-if="bIsRouterAlive">
<component :is="Component" v-if="$route.meta.keepAlive" :key="$route.path" />
</keep-alive>
<component :is="Component" v-if="!$route.meta.keepAlive" />
</router-view>
</template>
<script>
import {
nextTick,
provide
} from "vue"
export default {
name: "App",
setup() {
// 控制 router-view 是否显示达到刷新效果
const bIsRouterAlive = ref(true);
const fReload = () => {
// 通过 bIsRouterAlive 控制 router-view 达到刷新效果
bIsRouterAlive.value = false
nextTick(() => {
bIsRouterAlive.value = true
})
};
provide("fGlobalReload", fReload);
return {
bIsRouterAlive
}
}
}
</script>
B页面:test.vue
<script>
import {
inject,
onActivated
} from 'vue';
import {
useRoute
} from "vue-router";
export default {
name: "Test",
setup() {
const route = useRoute();
const fGlobalReload = inject("fGlobalReload");
onActivated(() => {
const route_meta = route.meta;
// resetType: "1" 刷新,"0"不进行操作
if (route_meta.resetType === '1') {
route_meta.resetType = '0';
fGlobalReload();
} else if (route_meta.resetType === '0') {
// 修改当前重置类型为"1",这样下一次,不管从哪个页面进入都默认刷新
route_meta.resetType = '1';
}
});
}
}
</script>
路由:router/index.js
// 其中部分路由
const routes = [
...其他路由,
{
name: 'test',
path: '/test',
component: () => import( /* webpackChunkName: "home" */ '../views/test/index.vue'),
meta: {
title: '测试', // String 页面标题
keepAlive: true, // Boolean 用于keep-alive:是否缓存
resetType: "1", // String 0不重置,1重置, 2不做任何动作
}
}]
C页面
//离开当前的组件,触发
import {
onBeforeRouteLeave
} from "vue-router";
setup() {
onBeforeRouteLeave((to) => {
// 这里判断主要是因为页面可能会跳转其他页面
if (to.path === "/test") {
to.meta.resetType = "1";
}
});
}
D页面:
B跳转D,D根据携带的 params 确定B是否需要刷新
//离开当前的组件,触发
import {
onBeforeRouteLeave
} from "vue-router";
setup() {
onBeforeRouteLeave((to) => {
// 是否为缓存页面
if (to.meta.keepAlive) {
if (to.path === "/test" && route_params.isReset) {
to.meta.resetType = "1";
}
}
});
}