vue3中keep-alive的使用及结合transition使用

这篇具有很好参考价值的文章主要介绍了vue3中keep-alive的使用及结合transition使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

正确用法

  1. 在组件中使用(这里结合了 transition 内置动画组件 )
<template>
   <div class="layout clearfix">
       <router-view v-slot="{ Component, route }">
           <transition name="fade-transform" mode="out-in" v-if="!route.meta.keepAlive">
               <component :is="Component" :key="route.name" />
           </transition>
           <transition name="fade-transform" mode="out-in" v-if="route.meta.keepAlive">
               <keep-alive>
                   <component :is="Component" :key="route.name"/>
               </keep-alive>
           </transition>
       </router-view>
   </div>
</template>

<script setup>
import { onActivated, onDeactivated } from 'vue'
// 在 keep-alive 组件激活时调用
onActivated(() => {
	console.log('onActivated')
})
// 在 keep-alive 组件停用时调用
onDeactivated(() => {
	console.log('onDeactivated')
})
</script>
  1. 在router.js中配置 keepAlive 自定义属性
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
  {
    path: '/',
    name: 'layout',
    component: () => import('../layout/index.vue'),
    children: [
	    {
	        path: '/home',
	        name: 'home',
	        component: () => import('../views/home.vue'),
	        meta{
	            title: '工作台',
	            keepAlive: true
	        }
	    },
    ]
  },
  {
    path: '/login',
    name: 'login',
    component: () => import('../views/login.vue')
  },
  {
    path: '/:pathMatch(.*)',
    component: () => import('../views/404.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

根据条件缓存页面

<template>
  <div id="app">
  	// 1. 基本用法
  	<router-view v-slot="{ Component, route }">
  		<keep-alive>
  			<component :is="Component" :key="route.path"></component>
		</keep-alive>
  	</router-view>
  	
	// 2. 将缓存 name 为 a 或者 b 的组件,结合动态组件使用
	<router-view v-slot="{ Component, route }">
  		<keep-alive include='a,b'>
  	    	<component :is="Component" key="route.path"></component>
		</keep-alive>
  	</router-view>
	
	// 3. 使用正则表达式,需使用 v-bind
	<router-view v-slot="{ Component, route }">
  		<keep-alive :include='/a|b/'>
  	    	<component :is="Component" key="route.path"></component>
		</keep-alive>	
  	</router-view>

	// 4.数组 (使用 `v-bind`)
	<router-view v-slot="{ Component, route }">
  		<keep-alive include="['a', 'b']">
  	    	<component :is="Component" key="route.path"></component>
		</keep-alive>	
  	</router-view>
	
	// 5.使用 max 通过传入 max 来限制可被缓存的最大组件实例数
	<router-view v-slot="{ Component, route }">
  		<keep-alive :max="10">
  	    	<component :is="Component" key="route.path"></component>
		</keep-alive>	
  	</router-view>
	
	// 6. 将不缓存 name 为 test 的组件
	<router-view v-slot="{ Component, route }">
  		<keep-alive exclude='test'>
  	    	<component :is="Component" key="route.path"></component>
		</keep-alive>	
  	</router-view>
  </div>
</template>

<script setup>

</script>

错误示例

  1. VueCompilerError: expects exactly one child element or component.
 <router-view v-slot="{ Component, route }">
    <transition name="fade-transform" mode="out-in" >
        <component :is="Component" :key="route.path" v-if="!route.meta.keepAlive"/>
        <keep-alive>
            <component :is="Component" :key="route.path" v-if="route.meta.keepAlive"/>
        </keep-alive>
    </transition>
</router-view>
  1. 不报错,但 keep-alive 内置组件的缓存没有效果,onActivated 函数也不会执行
 <router-view v-slot="{ Component, route }">
    <transition name="fade-transform" mode="out-in" >
        <component :is="Component" :key="route.path" v-if="!route.meta.keepAlive"/>
    </transition>
    <keep-alive>
        <transition name="fade-transform" mode="out-in" >
            <component :is="Component" :key="route.path" v-if="route.meta.keepAlive"/>
        </transition>
    </keep-alive>
</router-view>

vue中keep-alive的使用及详解文章来源地址https://www.toymoban.com/news/detail-681662.html

到了这里,关于vue3中keep-alive的使用及结合transition使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3,动态引入组件,同时动态设置组件的name,用于keep-alive缓存

    如果有两个页面逻辑大都相同,咱们想到的第一个肯定是写一个组件,然后两个路由都指向这个组件。 那如果现在多添加一个需求:两个页面在切换路由时都需要缓存数据,并且两个页面的缓存数据要求独立。 这个需求很简单:在router-view外层包裹一个keep-alive组件,指定缓

    2024年02月14日
    浏览(47)
  • Vue keep-alive的使用和原理解析

    在当今Web开发领域中,构建交互性强、可复用且易于维护的用户界面是至关重要的。而Vue.js作为一款现代化且流行的JavaScript框架,正是为了满足这些需求而诞生。它采用了MVVM架构模式,并通过数据驱动和组件化的方式,使我们能够更轻松地构建出优雅而高效的Web应用程序。

    2024年01月16日
    浏览(46)
  • vue3,vite开发, 动态引入组件,同时动态设置组件的name,用于keep-alive缓存

    如果有两个页面逻辑大都相同,咱们想到的第一个肯定是写一个组件,然后两个路由都指向这个组件。 那如果现在多添加一个需求:两个页面在切换路由时都需要缓存数据,并且两个页面的缓存数据要求独立。 这个需求很简单:在router-view外层包裹一个keep-alive组件,指定缓

    2024年02月07日
    浏览(46)
  • Vue使用keep-alive设置哪些组件可以被缓存,哪些不被缓存

    需求:当一个项目中,不是所有的组件页面都需要缓存起来,因为有些页面是不需要的    $route.meta.keepAlive 判断当前组件是否有keepAlive属性 在路由js文件中在配置路由规则的时候配置  

    2024年02月16日
    浏览(42)
  • Vue-组件缓存-keep-alive

    在Vue.js中,组件的复用和缓存是一个重要的优化手段。当我们频繁切换组件时,频繁的销毁和重建会带来一定的性能开销。为了解决这个问题,Vue提供了一个名为 keep-alive 的抽象组件。下面我们将深入探讨 keep-alive 的工作原理、使用场景和最佳实践。 keep-alive是什么 keep-aliv

    2024年01月16日
    浏览(45)
  • vue keep-alive 中的生命周期

    keep-alive 是 Vue 提供的一个内置组件,用来对组件进行缓存——在组件切换过程中将状态保留在内存中,防止重复渲染DOM。 如果为一个组件包裹了 keep-alive,那么它会多出两个生命周期:deactivated、activated。同时,beforeDestroy 和 destroyed 就不会再被触发了,因为组件 不会被真正

    2024年02月12日
    浏览(43)
  • Vue中的keep-alive缓存组件的理解

    keep-alive 是一个抽象组件,用于将其内部的组件保留在内存中,而不会重新渲染。这意味着当组件在keep-alive 内部切换时,其状态将被 保留 ,而不是被销毁和重新创建。          keep-alive用来缓存不经常变化的组件,以提高性能,当我们在不同路由之间进行切换或者是动

    2024年01月18日
    浏览(39)
  • Vue2 - keep-alive 作用和原理

    1,是一个内部组件,用于缓存组件实例。在组件切换时,不用重新创建而是使用缓存中的组件实例。 可以避免创建组件的开销。 可以 保留组件状态 。 2,有3个属性: include 和 exclude 属性,可以控制哪些组件进入缓存。 max 属性可以设置最大缓存数,当缓存的实例超过该数时

    2024年01月25日
    浏览(40)
  • Vue.js 进阶技巧:keep-alive 缓存组件解析

    🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_ CSDN 博客专家、23年度博客之星前端领域TOP1 🕠 牛客 高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课 签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你

    2024年03月11日
    浏览(86)
  • Vue路由组件的缓存keep-alive和include属性

    功能:浏览器页面在进行切换时,原有的路由组件会被销毁。通过缓存可以保存被切换的路由组件。 例子:在页面上填好的信息当进行页面切换再转回原来的页面时,原本信息被清空了需要重新填写 功能:切换路由时,保留被切换路由组件。 格式: keep-alive router-view/ keep-

    2024年02月06日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包