**This is the version of Vue3.0, Vue2.0 please click [this link](**

Downloads in past


64433.0.15 months ago4 years agoMinified + gzip package size for vue-page-stack in KB


This is the version of Vue3.0, Vue2.0 please click this link
npm version

English | 简体中文
A Vue3 SPA navigation manager,cache the UI in the SPA like a native application, rather than destroy it.


demo code


  • 🐉 Extend on vue-router, original navigation logic remains the same
  • push or forward renders the page and the newly rendered page is stored in Stack
  • 🏆 back or go(negative) when the previous pages are not re-rendered, but read from the Stack, and these pages retain the previous content state, such as form content, scrollbar scroll position, etc.
  • 🏈 back or go(negative) removes the unused pages from the Stack
  • 🎓replace will update the current page in the Stack
  • 🎉 The activated hook function is triggered when going back to the previous page
  • 🚀 Support for browser backward and forward events
  • 🐰 Provides routing direction changes and can add different animations when going forward and backward

The difference between VuePageStack and KeepAlive

  • 🌱 VuePageStack does not provide include, exclude and max parameters, because VuePageStack wants to achieve a complete page stack management, only in order in and out
  • 🪁 KeepAlive will keep caching the page after it has been cached, and VuePageStack will help destroy the extra pages based on the page stack hierarchy
  • 🧬 KeepAlive enters (not returns) the same route page and continues to reuse the previously cached page, while VuePageStack re-renders the page

Installation and use


pnpm install vue-page-stack


import { createApp } from 'vue';
import VuePageStack from 'vue-page-stack';

const app = createApp(App);

// vue-router is necessary
app.use(VuePageStack, { router });

// App.vue
  <router-view v-slot="{ Component }">
      <component :is="Component" :key="$route.fullPath"></component>



use Vue.use to install vue-page-stack
app.use(VuePageStack, options);
// example
app.use(VuePageStack, { router });

Options description:
| Attribute | Description | Type | Accepted Values | Default | | --------- | ------------------- | ------ | ------------------- | -------------- | | router | vue-router instance | Object | vue-router instance | - | | name | VuePageStack name | String | 'VuePageStack' | 'VuePageStack' | | keyName | stack-key name | String | 'stack-key' | 'stack-key' |
you can customize VuePageStack's name and keyName
app.use(VuePageStack, { router, name: 'VuePageStack', keyName: 'stack-key' });

forward or backward

If you want to make some animate entering or leaving, vue-page-stack offers stack-key-dir to judge forward or backward.
// App.vue
watch(route, to => {
  if (to.params['stack-key-dir'] === 'forward') {
  } else {




Why is the parameter keyName added to the route? To support the browser's backward and forward events,this is important in webApp or wechat.


Details changes for each release are documented in the release notes.


Getting the current page instance refers to the keep-alive section of Vue.


The plug-in draws on both vue-navigation and vue-nav,Thank you very much for their inspiration.

Contributors ✨

Thanks goes to these wonderful people (emoji key):
<td align="center"><a href=""><img src="" width="100px;" alt="hezf"/><br /><sub><b>hezf</b></sub></a><br /><a href="#design-hezhongfeng" title="Design">🎨</a></td>
<td align="center"><a href=""><img src="" width="100px;" alt="李娜"/><br /><sub><b>李娜</b></sub></a><br /><a href="" title="Documentation">📖</a></td>
<td align="center"><a href=""><img src="" width="100px;" alt="余小磊"/><br /><sub><b>余小磊</b></sub></a><br /><a href="" title="Code">💻</a></td>
<td align="center"><a href=""><img src="" width="100px;" alt="yellowbeee"/><br /><sub><b>yellowbeee</b></sub></a><br /><a href="" title="Code">💻</a></td>