Vue3-keep-alive-component NPM

Vue 3 Keep Alive Component

A workaround solution for vue3 router&keep-alive components issue keep-alive component in nested route result in child route mounted twice

Installation

npm i vue3-keep-alive-component -S

Usage

Keep Router Alive

<template>
   <router-view v-slot="{ Component }">
      <KeepAliveComponent :component="Component" />
   </router-view>
</template>
<script lang="ts" setup>
   import { KeepAliveComponent } from 'vue3-keep-alive-component'
</script>
<style></style>

Use Activated Route

When using <KeepAliveComponent/> and useRoute() together, there will be problem. In this case, use useActivatedRoute() instead.

import { useActivatedRoute } from 'vue3-keep-alive-component'

const activatedRoute = useActivatedRoute() // a replacement api for official api useRoute()