代码拉取完成，页面将自动刷新
stack-keyTransition 一起使用这个是 Vue3.x 的版本 ，Vue2.0 请点击这个链接
English | 简体中文
Vue3 单页应用导航管理器，像原生 app 一样管理页面栈而不是销毁。
push或者forward的时候重新渲染页面，Stack 中会存储新渲染的页面back或者go(负数)的时候先前的页面不会重新渲染，而是从 Stack 中读取，并且这些页面保留着先前的内容状态，例如表单内容，滚动条滚动的位置等back或者go(负数)的时候会把不用的页面从 Stack 中移除replace会更新 Stack 中当前页面include exclude 和 max 参数，因为 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 💻 |
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手