vue-page-stack

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.

Example

preview

demo code

Features

🐉 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

Installation

pnpm install vue-page-stack

use

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

const app = createApp(App);

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

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

API

install

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') {
    console.log('forward');
  } else {
    console.log('back');
  }
});