vue-router 中 keep-alive 使用

code_std

已于 2023-02-08 17:13:58 修改

阅读量214

点赞数

文章标签： vue.js javascript 前端

于 2023-02-08 15:47:15 首次发布

本文链接：https://blog.csdn.net/qq_26330543/article/details/128936522

版权

文章介绍了在Vue项目中如何管理组件缓存，特别是在vue-router的设置中，通过keep-alive标签实现页面缓存。方法一是直接在HomeView.vue模板中使用keep-alive包裹router-view；方法二是通过路由配置，在router/index.js中对特定路由的组件设置meta属性来控制是否缓存。其中，第二种方法已被废弃，推荐使用模板内的keep-alive方式。

摘要由CSDN通过智能技术生成

要求如下图

在这里插入图片描述

解决方式一

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;