通过路由配置keepAlive判断是否缓存

当在内部切换组件时,将相应地调用其onActivated(缓存激活)和onDeactivated(在组件切换中老组件消失的时候执行)生命周期挂钩。
一.路由配置:

import { createRouter, createWebHashHistory } from 'vue-router';
import Home from '../views/Home.vue';//路由预加载

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,//路由预加载
    meta: { 
      keepAlive:true, //是否需要缓存
     }
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('@/views/About.vue'),//路由懒加载
    meta: { 
      keepAlive:false, ///是否需要缓存
     }
  }
]

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

export default router

二.组件配置:

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
    <router-view v-slot="{ Component }">
      <!-- vue3.0配置 keep-alive缓存-->
      <keep-alive>
        <component :is="Component" v-if="$route.meta.keepAlive" />
      </keep-alive>
      <component :is="Component" v-if="!$route.meta.keepAlive" />
    </router-view>
  </div>
</template>
<script>
export default {
};
</script>

<style lang="less">
</style>

三.include和exclude,include是绑定需要缓存的组件,并且要和组件名一致;exclude绑定则是不需要缓存的组件。当两个属性同时使用时exclude权重大于include

  	<!-- 逗号分隔字符串 -->
    <keep-alive include="Home,About" exclude="About">
    	<component :is="Component" />
    </keep-alive>
    <!-- 正则表达式 (使用 `v-bind`) -->
    <keep-alive :include="/Home|About/">
    	 <component :is="Component"></component>
    </keep-alive>
    <!-- 数组 (使用 `v-bind`) -->
    <keep-alive :include="['Home', 'About']">
    	<component :is="Component"></component>
    </keep-alive>

四.缓存的最大数值
keep-alive还有一个max属性,代表缓存组件最大数量,一旦这个数字达到了,在新实例被创建之前,已缓存组件中最久没有被访问的实例会被销毁掉。

	<keep-alive :max="10">
        <component :is="Component"></component>
    </keep-alive>

五.总结
对于keep-alive缓存,不能跨级缓存,缓存的是路由页面,也就是说不能指定缓存name = "Home"组件内的子组件,除非将子组件弄成路由页面,在通过keep-alive来缓存。

Logo

前往低代码交流专区

更多推荐