V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
hezhongfeng
V2EX  ›  前端开发

Vue 单页应用导航管理器,像原生 app 一样管理页面

  •  
  •   hezhongfeng · 2019-07-26 18:10:22 +08:00 · 2912 次点击
    这是一个创建于 1931 天前的主题,其中的信息可能已经有所发展或是发生改变。

    老哥们,介绍个自己的轮子~

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

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

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

    keep-alive

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

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

    CSS 配合嵌套 route

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

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

    最后憋出个下面的轮子

    vue-page-stack

    npm version

    English | 简体中文


    Vue 单页应用导航管理器,像原生 app 一样管理页面栈而不是销毁。

    Example

    预览

    示例源码

    功能特性

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

    安装和用法

    安装

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

    使用

    import Vue from 'vue'
    import VuePageStack from 'vue-page-stack';
    
    // vue-router is necessary
    Vue.use(VuePageStack, { router }); 
    
    // App.vue
    <template>
      <div id="app">
        <vue-page-stack>
          <router-view ></router-view>
        </vue-page-stack>
      </div>
    </template>
    

    CDN

    <script src="https://unpkg.com/vue-page-stack/dist/vue-page-stack.js"></script>
    
    Vue.use(VuePageStack.default, { router });
    

    API

    注册插件

    注册的时候可以指定 VuePageStack 的名字和 keyName

    use Vue.use to install vue-page-stack 使用之前需要注册插件

    Vue.use(VuePageStack, options);
    // example
    Vue.use(VuePageStack, { router });
    

    Options 说明:

    Attribute | Description | Type | Accepted Values | Default ---|---|---|---|--- router | vue-router instance | Object | vue-router instance | - name | VuePageStack name | String | 'VuePageStack' | 'VuePageStack' keyName | stack-key name | String | 'stack-key' | 'stack-key'

    注册的时候可以指定 VuePageStack 的名字和 keyName

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

    前进和后退

    如果想在页面前进或者后退的时候添加一些动画,可以通过stack-key-dir进行判断

    // App.vue
    $route(to, from) {
      if (to.params['stack-key-dir'] === 'forward') {
        this.transitionName = 'forward';
      } else {
        this.transitionName = 'back';
      }
    }
    

    example

    相关说明

    keyName

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

    原理

    获取当前页面实例部分参考了Vue源码中keep-alive的部分

    感谢

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

    1 条回复    2019-10-30 11:36:54 +08:00
    hezhongfeng
        1
    hezhongfeng  
    OP
       2019-10-30 11:36:54 +08:00
    更新到最新版,适配最新的 vue-router
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3391 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 10:47 · PVG 18:47 · LAX 02:47 · JFK 05:47
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.