vue3-admin-init-demo (Vite版本)

npm install

npm run dev

npm run build

├─api 			 # 接口
├─assets 		 # 资源
├─components	 # 组件
├─config 		 # 配置
├─directives 	 # 自定义指令
├─layouts 		 # 布局
├─lib 			 # UI库按需引入入口
├─model 		 # 模型
├─router 		 # 路由
├─store 		 # vuex
├─style 		 # 样式
├─utils  		 # 工具
└─views 		 # 视图

1. 配置Home.vue子路由页面开启缓存，配置完毕进入该页面就会缓存该组件，销毁时机见步骤2
// src/router/home.js 新增子路由并设置meta.keepAlive = [{mutationName:"",componentName""}]即可实现缓存
// 以下是src/views/test/page2.vue缓存配置示例，具体文件：src/router/home.js
// src/views/test/page2.vue 页面的路由缓存配置
{
	path: 'page2',
	name: 'page2',
	component: () => import('../views/test/page2.vue'),
	meta: {
		title: "page2",
		keepAlive: [{
			mutationName: "addkeepAliveComponentsHome", // mutationName对应vuex的mutation，src/views/Home.vue 的 mutation已经配置好了，不需要改变
			componentName: "page2", // componentName对应需要缓存组件的name属性,不是路由配置的name属性
		}], // beforeEach钩子使用，对应kepp-alive组件的include属性
	}
}
2. 销毁缓存组件
	// 在缓存组件的BeforeRouteLeave设置取消缓存即可
	const store = useStore();
	onBeforeRouteLeave((to, from, next) => {
		const keepAliveFullPath = ["/home/page1"];
		if (!keepAliveFullPath.includes(to.fullPath)) {
			store.commit("removekeepAliveComponentsHome", "page2"); // 第二个参数 务必等于 该组件name
		}
		next();
	});

如果想缓存的页面使用了router-view组件，并且设置了路由的redirect属性直接重定向到了子页面，
那么本来想缓存的页面就不会走router.beforeEach钩子函数了,因为直接被重定向到子页面了，
所以想要实现该页面的缓存就需要的配置子页面的meta.keepAlive里面新增该页面的缓存配置