vue-page-stack v3.1.2
vue-page-stack
v3.1.2
- 移除了 url 上的参数
stack-key
- 因为 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.
Example
Features
- 🐉 Extend on vue-router, original navigation logic remains the same
- ⚽
push
orforward
renders the page and the newly rendered page is stored in Stack - 🏆
back
orgo(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
orgo(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
andmax
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>
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):
17 days ago
17 days ago
2 months ago
2 months ago
2 months ago
2 months ago
10 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
10 months ago
10 months ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago