Skip to content

Latest commit

 

History

History
50 lines (32 loc) · 1.07 KB

README.md

File metadata and controls

50 lines (32 loc) · 1.07 KB

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()

Building

  • Clone this repo
  • Make sure you have node-js >=18.16
  • Install dependencies npm install
  • Run webpack dev server npm run build

License

MIT License