vue-page-stack

3.1.0 • Public • Published

vue-page-stack

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.

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

hezf
hezf

🎨
李娜
李娜

📖
余小磊
余小磊

💻
yellowbeee
yellowbeee

💻

Package Sidebar

Install

npm i vue-page-stack

Weekly Downloads

53

Version

3.1.0

License

MIT

Unpacked Size

28.6 kB

Total Files

9

Last publish

Collaborators

  • hezhongfeng