Vue页面堆栈管理器详情

2022-04-15 0 998
目录
  • 2、尝试过的方法
    • 2.1 keep-alive
    • 2.2 CSS配合嵌套route
  • 3、功能说明
    • 4、安装和用法
      • 5、API
        • 5.1 注册
        • 5.2 前进和后退
      • 6、相关说明
        • 6.1 keyName
        • 6.2 原理

      A vue page stack manager Vue页面堆栈管理器 vue-page-stack

      Vue页面堆栈管理器详情

      示例展示了一般的前进、后退(有activited)和replace的场景,同时还展示了同一个路由可以存在多层的效果(输入必要信息)

      目前版本还没有经过整体业务的测试,欢迎有同样需求的进行试用

      预览

      1、需求分析

      由于重度使用了Vue全家桶在web App、公众号和原生Hybrid开发,所以很自然的会遇到页面跳转与回退这方面的问题。

      场景举例:

      • 列表页进入详情页,然后回退
      • 某操作页A需要在下一页面B选择,选择后需要退回到A页面(A页面还要知道选择了什么)
      • 在任意页面进入到登录页面,登录或者注册成功后返回到原页面,并且要保证继续回退是不会到登陆页面的
      • 支持浏览器的backforward(微信或者小程序很有用)
      • 在进入、退出或者某些特殊页面的时候添加一些动画,比如模仿ios的默认动画(进入是页面从右向左平移,退出是页面从左向右平移)

      2、尝试过的方法

      尝试了以下方法,但是都没有达到我的预期

      2.1 keep-alive

      一般是使用两个router-view通过route信息和keep-alive控制页面是否缓存,这样存在两个问题:

      • keep-alive对相同的页面只会存储一次,不会有两个版本的相同页面
      • 两个router-view之间没有办法使用transition等动画

      2.2 CSS配合嵌套route

      曾经在查看cube-ui的例子的时候,发现他们的例子好像解决了页面缓存的问题,我借鉴(copy)了他们的处理方式,升级了一下,使用CSS和嵌套route的方式实现了基本的需求。

      但是也有缺点:

      • 我必须严格按照页面的层级来写我的route
      • 很多页面在多个地方需要用到,我必须都得把路由配上(例如商品详情页面,会在很多个地方有入口)

      3、功能说明

      • 在vue-router上扩展,原有导航逻辑不需改变
      • push或者forward的时候重新渲染页面,Stack中会添加新渲染的页面
      • back或者go(负数)的时候不会重新渲染,从Stack中读取先前的页面,会保留好先前的内容状态,例如表单内容,滚动条滑动的位置等
      • back或者go(负数)的时候会把不用的页面从Stack中移除
      • replace会更新Stack中页面信息
      • 回退到之前页面的时候有activited钩子函数触发
      • 支持浏览器的后退,前进事件
      • 支持响应路由参数的变化,例如从 /user/foo 导航到 /user/bar,组件实例会被复用
      • 可以在前进和后退的时候添加不同的动画,也可以在特殊页面添加特殊的动画

      4、安装和用法

      安装:

      npm install vue-page-stack
      # OR
      yarn add vue-page-stack
      

      使用:

      import Vue from 'vue'
      import VuePageStack from 'vue-page-stack';
      
      // vue-router是必须的
      Vue.use(VuePageStack, { router }); 
      // App.vue
      <template>
        <div id="app">
          <vue-page-stack>
            <router-view ></router-view>
          </vue-page-stack>
        </div>
      </template>
      
      <script>
      export default {
        name: 'App',
        data() {
          return {
          };
        },
        components: {},
        created() {},
        methods: {}
      };
      </script>
      

      5、API

      5.1 注册

       注册的时候可以指定VuePageStack的名字和keyName,一般不需要

      Vue.use(VuePageStack, { router, name: 'VuePageStack', keyName: 'stack-key' });
      
      

      5.2 前进和后退

      想在前进、后退或者特殊路由添加一些动画,可以在router-view的页面通过watch $route,通过stack-key-dir(自定义keyName这里也随之变化)参数判断此时的方向,可以参考实例

      6、相关说明

      6.1 keyName

      为什么会给路由添加keyName这个参数,是为了支持浏览器的后退,前进事件,这个特点在微信公众号和小程序很重要

      6.2 原理

      获取当前页面Stack部分参考了keep-alive的部分

      这个插件存在我心中很久了,断断续续做了好久,终于被我搞定了,真的非常开心。

      目前版本还没有经过整体业务的测试,欢迎有同样需求的进行试用,有任何的意见或者建议,欢迎在 Github issue和PR,感谢你的支持和贡献。

      这个插件同时借鉴了vue-navigation和vue-nav,很感谢他们给的灵感。

      到此这篇关于Vue页面堆栈管理器详情的文章就介绍到这了,更多相关Vue页面堆栈管理器内容请搜索NICE源码以前的文章或继续浏览下面的相关文章希望大家以后多多支持NICE源码!

      免责声明:
      1、本网站所有发布的源码、软件和资料均为收集各大资源网站整理而来;仅限用于学习和研究目的,您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。 不得使用于非法商业用途,不得违反国家法律。否则后果自负!

      2、本站信息来自网络,版权争议与本站无关。一切关于该资源商业行为与www.niceym.com无关。
      如果您喜欢该程序,请支持正版源码、软件,购买注册,得到更好的正版服务。
      如有侵犯你版权的,请邮件与我们联系处理(邮箱:skknet@qq.com),本站将立即改正。

      NICE源码网 JavaScript Vue页面堆栈管理器详情 https://www.niceym.com/18360.html