Vue keep-alive基础用法

不知言

已于 2025-07-01 15:03:37 修改

阅读量568

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2021-12-23 19:46:30 首次发布

本文链接：https://blog.csdn.net/WangYanWenXin/article/details/122114647

Vue 专栏收录该内容

29 篇文章

订阅专栏

本文介绍如何在Vue.js项目中利用keep-alive组件实现页面缓存功能，重点讲解了配置路由和组件name属性的方法，以及通过watch监听路由变化来控制页面缓存的逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

想使用keep-alive，必须在router和相关组件页面里面添加name属性，且名称对应，如下：

Router

{
	path: '',
	component: layout ,
	children: [
		{
			name: 'Analysis',// 必须滴
			path: '/analysis',
			component:()=>import('@/views/page/analysis/index.vue'),
			meta: { title: '', keepAlive: true	},
		},
	]
},
{
	path: '',
	component: layout,
	children: [
		{
			name: 'ReportDetail',// 必须滴
			path: '/report/detail',
			component:()=>import('@/views/page/analysis/report/detail.vue'),
			meta: {	title: '', keepAlive: false },
		},
	]
}

组件页面

......主页面
export default {
  name: 'Analysis' // 必须滴
}
......
......详情页面
export default {
  name: 'ReportDetail' // 必须滴 
}
......

vue2 RouterView

<template>
<!-- keep-alive，必须是同级别的router-view时才会起作用，简言之就是两个页面都渲染的同一个router-view -->
	<transition :name="isTransition">
       <keep-alive :include="includePageNames">
         <router-view class="" :key="key" />
       </keep-alive>
    </transition>	
</template>
<script>
import ...
export default {
	name: '',
	data() {
		return {
			isTransition: true? 'slide-left' : '', // 它的具体作用用的时候再研究
      		includePageNames: []
		};
	},
  computed: {
    key() {
      // return this.$key();
      return this.$route.path
    }
  },
  watch: {
    '$route' : {// 监听路由，取值
      handler(nv, ov) {
        for(let i in nv.matched){
          if(i !== 0){
            let indexOf = this.includePageNames.indexOf(nv.matched[i].name)
            //判断数组中是否存在这个name，如果存在，则说明是返回的，要清除缓存
            if(indexOf === -1 && nv.matched[i].meta.keepAlive) {//不存在，添加缓存
              this.includePageNames.push(nv.matched[i].name)
            }
          }
        }
      },
      deep: true,
      immediate: true
    }
  }
};
</script>

vue3 RouterView

<router-view v-slot="{ Component }">
   <keep-alive :include="includePageNames">
     <component :is="Component" :key="getKey" />
   </keep-alive>
 </router-view>

import { useRouter } from 'vue-router'
const router = useRouter()
const getKey = computed(() => {
  const nr = router.currentRoute
  return nr.fullPath
})

watch(
  router.currentRoute,
  (newRoute, oldRoute) => {
    if (newRoute.meta && newRoute.meta.keepAlive && newRoute.meta.keepAlive.value === 1) {
      let indexOf = includePageNames.value.indexOf(newRoute.name)
      //判断数组中是否存在这个name，如果存在，则说明是返回的，要清除缓存
      if (indexOf === -1) {
        //不存在，添加缓存
        includePageNames.value.push(newRoute.name)
      }
    }
  },
  { deep: true, immediate: true }
)