Page Stack for Vue3

Github / Npm

简介：

按照app页面栈的方式，控制路由跳转，打开新页面时保存旧页面的状态，返回时销毁页面，适合移动端H5项目

preview

在线预览

示例代码

Usage：

1. 安装依赖

   yarn add page-stack-vue3

2. 在view-router中使用

   import PageStack from "page-stack-vue3";
   import { cloneVNode, defineComponent, ref, VNode } from "vue";
   import { RouteLocation, RouterView } from "vue-router";
   
   export default defineComponent({
   setup() {
       const psRef = ref();
       const onPageResume = function () {
           document.title = `第${psRef.value?.getPageSize() || 1}页`;
       };
       const lifeCb = {
           onResume: onPageResume,
       };
       return function () {
           return (
               <RouterView>
                   {function({Component,route}: {Component: VNode;route:RouteLocation}) {
                       return (
                           <PageStack ref="psRef" lifeCycleCallback={lifeCb}>
                               {Component && cloneVNode(Component, { key: route.path })}
                           </PageStack>
                       );
                   }}
               </RouterView>
           );
       };
   },
   });
   

3. Component Options

   {
       //vue router实例
       router: {
           type: Object as PropType<Router>,
           require: false,
       },
       //是否将路由query参数填充到页面组件的props中，router不传则此参数无效
       mergeQueryToProps: {
           type: Boolean,
           default: false,
       },
       //关闭页面切换动画
       disableAnimation: {
           type: Boolean,
           default: false,
       },
   }

注意事项

1. 如果要跟transition一起使用，请将transition作为子组件使用，并配置disableAnimation=true

   <page-stack :disableAnimation="true">
       <transition ...props>
           <component is="xxx"/>
       </transition>
   </page-stack>

2. 本组件会重写页面组件的key
3. 本组件内部模仿了keep-alive的实现，所以页面组件的生命周期同keep-alive
4. 虽然没有hack vue，但是使用了vue的私有api，所以不保证兼容所有的vue3版本，如果你的vue版本用不了这个库，那就是用不了。可以提issues。
5. 暂不支持作为被嵌套的路由使用，对嵌套路由的支持尚不完全