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将父组件的数据传递给子组件,但是有个问题,子组件一般不 ...
随机推荐
- grep参数说明及常用用法(转)
转:https://www.cnblogs.com/leo-li-3046/p/5690613.html grep常用参数说明 grep [OPTIONS] PATTERN [FILE...] gre ...
- TensorFlow基础(三)激活函数
(1)激活函数 激活函数(Activation function)并不是指这个函数去激活什么,而是指如何把“激活的神经元的特征”通过函数把特征保留映射出来.对输入信息进行非线性变换. 线性模型的最大特 ...
- Vue通过input筛选数据
<div id="app"> <input v-model='search' /> <ul> <li v-for="item i ...
- php无极限分类函数
/** * [make_tree description] * @Author Lerko * @DateTime 2017-04-01T14:57:24+0800 * @param [type] $ ...
- struts2不同版本在核心filter在web.xml中的配置
FilterDispatcher是struts2.0.x到2.1.2版本的核心过滤器.配置如下: <filter> <filter-name>struts2</filte ...
- 访问服务器,远程访问linux主机
ssh conch@+ip地址,输入密码后就可以访问并使用服务器了.登录服务器之后,xbwang@xbwang-desktop:~$变成了conch@conchdev:~$ ,这样你就可以像使用普通电 ...
- Junit报错Initialization Error
出错原因是没有把方法声明为public
- ListView 中嵌套 GridView
1.主布局文件 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:andr ...
- ElasticSearch搜索服务技术
ElasticSearch 基于的lucene开发的搜索服务技术;天生支持分布式; Es的结构 gatway:存储层,所有的数据可以存储在本地(多个es节点形成分布式存储),hdfs输出位置,共享文件 ...
- ESP8266 wifi干扰钓鱼实现
说明:绝大部分都是对着下面的参考文章来做的.这里只把基本流程和我自己遇到的问题写一下.如有其他问题可以访问文章末的参考文章进行查找! esp8266模块 我们需要购买一块esp8266模块,如下图所示 ...