1. 移除了 url 上的参数 stack-key
2. 因为 Vue3.x 对内置组件有特殊处理，所以目前不能和 Transition 一起使用

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

English | 简体中文

A Vue3 SPA navigation manager,cache the UI in the SPA like a native application, rather than destroy it.

preview

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

• 🌱 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

pnpm install vue-page-stack

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

const app = createApp(App);

// router is necessary
app.use(VuePageStackPlugin, { router });

// App.vue
<template>
  <router-view v-slot="{ Component }">
    <vue-page-stack @back="onBack" @forward="onForward">
      <component :is="Component" :key="$route.fullPath"></component>
    </vue-page-stack>
  </router-view>
</template>

<script setup>
const onBack = () => {
  console.log('back');
};

const onForward = () => {
  console.log('forward');
};
</script>

use Vue.use to install vue-page-stack

import { VuePageStackPlugin } from 'vue-page-stack';

//...
app.use(VuePageStackPlugin, { router });

Options description：

If you want to make some animate entering or leaving, vue-page-stack offers stack-key-dir to judge forward or backward.

// App.vue
<vue-page-stack @back="onBack" @forward="onForward">
  <component :is="Component" :key="$route.fullPath"></component>
</vue-page-stack>

example

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.

Thanks goes to these wonderful people (emoji key):

hezf 🎨

李娜 📖

余小磊 💻

yellowbeee 💻