vue-page-stack

v3.1.4

1. FIx the bug of refreshing the browser and then going back

v3.1.3

1. Fixed the page caching issue when using replace.

v3.1.2

1. Removed the stack-key parameter from the URL.
2. Due to special handling of built-in components in Vue3.x, it is currently not possible to use it together with 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.

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 { 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>

API

install

use Vue.use to install vue-page-stack

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

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

Options description：

| Attribute | Description | Type | Accepted Values | Default | | --------- | ------------------- | ------ | ------------------- | -------------- | | router | vue-router instance | Object | vue-router instance | - | | name | VuePageStack name | String | 'VuePageStack' | 'VuePageStack' |

forward or back

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

Notes

Changelog

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

Principle

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

Thanks

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