欢迎您访问 最编程 本站为您分享编程语言代码，编程技术文章！

热门搜索/Hot Search

您现在的位置是： 首页

Vue3中keep-alive组件的使用方法与配置详解

最编程 2024-08-02 20:08:51
...

  示例代码：

<template>
  <div id="nav">
    <button @click='jumpHome'>home</button>
    <button @click='jumpAbout'>about</button>
  </div>
  <router-view v-slot="{ Component }">
    <keep-alive exclude='Home'>
      <component :is="Component" />
    </keep-alive>
  </router-view>
</template>

<script>
	export default {
		name: 'App'
	}
</script>

<script setup>
	import { useRouter } from 'vue-router'
	
	const router = useRouter()
	const jumpHome = () => {
		router.push({path:'/Home'})
	}
	const jumpAbout = () => {
		router.push({path:'/About'})
	}
</script>

上一篇： Vue中的keep-alive缓存机制解析

下一篇： 深入理解 Vue 中的 KeepAlive：原理和源码解析

推荐阅读