- 修复 router.go 缓存失效的 bug
- 修复刷新浏览器然后后退的 bug
- 修复 replace 时,页面缓存问题
- 移除了 url 上的参数
stack-key
- 因为 Vue3.x 对内置组件有特殊处理,所以目前不能和
Transition
一起使用
这个是 Vue3.x 的版本 ,Vue2.0 请点击这个链接
English | 简体中文
Vue3 单页应用导航管理器,像原生 app 一样管理页面栈而不是销毁。
- 🐉 在 vue-router 上扩展,原有导航逻辑不变
- ⚽
push
或者forward
的时候重新渲染页面,Stack 中会存储新渲染的页面 - 🏆
back
或者go(负数)
的时候先前的页面不会重新渲染,而是从 Stack 中读取,并且这些页面保留着先前的内容状态,例如表单内容,滚动条滚动的位置等 - 🏈
back
或者go(负数)
的时候会把不用的页面从 Stack 中移除 - 🎓
replace
会更新 Stack 中当前页面 - 🎉 回退到之前页面的时候有 activated 钩子函数触发
- 🚀 支持浏览器的后退,前进事件
- 🐰 提供路由方向的变化,并且可以在前进和后退的时候添加不同的动画
- 🌱 VuePageStack 不提供
include
exclude
和max
参数,因为 VuePageStack 想要实现的是一个完整的页面栈管理,只能按照顺序进出 - 🪁 KeepAlive 缓存过页面之后会一直缓存这个页面,VuePageStack 会根据页面栈的层级而自助销毁多余的页面
- 🧬 KeepAlive 进入(不是返回)相同的路由页面,会继续复用以前缓存的页面,而 VuePageStack 会重新渲染页面
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>
使用之前需要注册插件
import { VuePageStackPlugin } from 'vue-page-stack';
//...
app.use(VuePageStackPlugin, { router });
Options 说明:
Attribute | Description | Type | Accepted Values | Default |
---|---|---|---|---|
router | vue-router instance | Object | vue-router instance | - |
如果想在页面前进或者后退的时候添加一些事件,可以通过组件的 back
事件和 forward
事件进行处理
// 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>
主要的更新日志在 release notes
获取当前页面实例部分参考了Vue
源码中KeepAlive
的部分
这个插件同时借鉴了vue-navigation和vue-nav,很感谢他们给的灵感。
Thanks goes to these wonderful people (emoji key):
hezf 🎨 |
李娜 📖 |
余小磊 💻 |
yellowbeee 💻 |