vue3.x使用provide / inject进行页面刷新

版本号：
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";
			}
		}
	});
}