vue-router 中 keep-alive 使用

要求如下圖

解決方式一

HomeView.vue 更改

<template>
  <div class="home">
    <el-container>
		<el-header></el-header>
        <el-main>
			<el-form :model="data_form" label-width="120px">
				<el-button type="primary" @click="toParent()">PM主表資料比對</el-button>
				<el-button type="primary" @click="toChild()">PM子表資料比對</el-button>
			</el-form>
		</el-main>
		
		<div id="app">
			//***********從這裡開始**********************vue-router***keep-alive
			<router-view v-slot="{ Component }">
			    <keep-alive>
			      <component :is="Component" />
			    </keep-alive>
			</router-view>
			//***********從這裡結束*********************vue-router***keep-alive
		</div>
    </el-container>
  </div>
</template>
           

參考依據

vue-router 官方文檔

解決方式二(這種方式現在廢棄了，使用可能不生效，廢棄原因參考官方文檔)

router路由 下 index.js 更改

import { createRouter, createWebHashHistory } from "vue-router";
import HomeView from "../views/HomeView.vue";
import PmFInsert from "../components/pm_f_insert.vue"
import PmFSelect from "../components/pm_f_select.vue"
import PmChild from "../components/pm_child.vue"

const routes = [
  {
    path: "/",name: "home",component: HomeView,
	children:[
		{path:'/',redirect:'PmFInsert'},
		{
			path:'PmFInsert', 
			name:'home_f', 
			component:PmFInsert, 
			meta:{keepAlive:true}//表示  此頁面需要緩存
		},
		{
			path:'PmFSelect',
			name:'f_select', 
			component:PmFSelect,
		 	meta:{keepAlive:false}
		},
		{
			path:'PmChild',
			name:'c_home', 
			component:PmChild ,
			meta:{keepAlive:false}//表示  此頁面不需要緩存
		}
	]
	//***********從這裡結束*********************vue-router***keep-alive
  },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes
});

export default router;