NavRouter
使用方法只需要跟vue-router一样正常使用即可,这里我们新加了一个路由跳转方法nav:
router.nav()//参数同router.replace一样。
路由跳转策略
首先说下路由跳转过程,不管是hash还是h5history模式在进行一系列跳转只有会保存路由堆栈,这样我们在点击浏览器的前进后退也可以进行页面的切换,如下:
routerA -> routerB -> routerC
问题
假如我们在routerB那么可以前进到routerC,或者退到routerA,在移动端我们一半可以使用右滑来后退,但是在iPhone可以左滑前进(前提是存在可前进的路由)。而这里遇到的问题是如果我们做一个左滑的功能的时候就很容易触发iPhone这个功能,当然有人说可以在路由跳转的时候使用replace这样就没有前进的路由了,但是我们总会有要后退的时候,比如商品列表到商品详情,因此我们还需要后退功能,这里我们对路由跳转做了劫持。
方案
路由前进使用我们自己方法nav, 每次记录跳转的路由,而后退的时候再把记录的路由取出来手动跳转即可。在跳转当然是每次都是replace,这样保持了路由堆栈只有一个记录,而我们自己记录的如果在后退过程中没有了,就按照原生的去跳转了。
源码地址:https://github.com/Stevenzwzhai/NavRouter
NavRouter的更多相关文章
- flutter最简单轻量便捷的路由管理方案NavRouter
大家好,我是CrazyQ1,今天给大家推荐一个路由管理方案,用的非常不错的,叫nav_router. 项目地址是:https://github.com/fluttercandies/nav_route ...
- 记一次vue+vuex+vue-router+axios+elementUI开发(三)
项目用到了状态管理工具 Vuex 中文文档:https://vuex.vuejs.org/zh/guide/ 大家都知道,vue中可用props将父组件的数据传递给子组件,但是有个问题,子组件一般不 ...
随机推荐
- BZOJ2346:[Baltic 2011]Lamp(最短路)
Description 2255是一个傻X,他连自己家灯不亮了都不知道. 某天TZ大神路过他家,发现了这一情况, 于是TZ开始行侠仗义了. TZ发现是电路板的问题, 他打开了电路板,发现线路根本没有连 ...
- BZOJ3196:二逼平衡树(线段树套Splay)
Description 您需要写一种数据结构(可参考题目标题),来维护一个有序数列,其中需要提供以下操作: 1.查询k在区间内的排名 2.查询区间内排名为k的值 3.修改某一位值上的数值 4.查询k在 ...
- js中返回上一页
<a class="btn btn-danger" href="javascript:history.go(-1);">取消</a>
- Html5的本地储存 Web Storage
Html5 中的存储包括两种:sessionStorage 和 localStorage sessionStorage 用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话 ...
- 强大的Windows 10数字权利获取工具HWIDGEN
前言: 每当windows 10 系统过期就是头疼的key激活,更奇怪的是每次激活的方式不同,上次有效下次就不知道有没有效了,今天发现一种更改数字权利的工具脚本,不要太牛逼!!! 安装之前的准备工作: ...
- 解决MyEclipse JAVA EE无法识别Base64问题
第一步:右击项目选择Build Path,选择Configure Build Path 第二步:点击JRE System Library选择右边的Edit 第三步:选择Alternate JRE,点击 ...
- DB数据源之SpringBoot+MyBatis踏坑过程(三)手工+半自动注解配置数据源与加载Mapper.xml扫描
DB数据源之SpringBoot+MyBatis踏坑过程(三)手工+半自动注解配置数据源与加载Mapper.xml扫描 liuyuhang原创,未经允许禁止转载 系列目录连接 DB数据源之Spr ...
- WPF几个样式
其实也是大家学的最多的,网上的. 1.老版360 2.360悬浮窗 不好意思,没有找到悬浮球的图片,随便一个代替了 3.老版迅雷 4.新版360 遗憾的是这个样式没有完整的源代码.只是一个演示和图片代 ...
- 04.nginx使用
博客为日常工作学习积累总结: 1.安装依赖包 安装pcre :yum install pcre pcre-devel -y 安装openssl:yum install openssl o ...
- Flask之app实例的参数配置
说是app实例的配置, 实际也就是flask程序的配置 Flask 是一个非常灵活且短小精干的web框架 , 那么灵活性从什么地方体现呢? 有一个神奇的东西叫 Flask配置 , 这个东西怎么用呢? ...