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将父组件的数据传递给子组件,但是有个问题,子组件一般不 ...
随机推荐
- BZOJ1924:[SDOI2010]所驼门王的宝藏(强连通分量,拓扑排序)
Description Input 第一行给出三个正整数 N, R, C. 以下 N 行,每行给出一扇传送门的信息,包含三个正整数xi, yi, Ti,表示该传送门设在位于第 xi行第yi列的藏宝宫室 ...
- JDBC(3)ResultSet
ResultSet 在执行查询(select)时候使用 这是一个结果对象,该对象包含结果的方法但指针定位到一行时 调用Statement 对象的 executeQuery(sql)可以得到结果集 可以 ...
- tomcat快速部署War包操作
Linux快速部署War包操作,暂时是最简单的操作 1.先关闭Tomcat /home/java/tomcat7/bin/shutdown.sh 2.进入War包存放目录(可以通过工具:SSH Sec ...
- 解决IntelliJ IDEA控制台输出中文乱码问题
一.原因: windows下的本地编码(GBK) ,在idea 整合的 maven中使得默认vm 的编码是utf-8.所以出现控制台乱码.tomcat设置的utf-8也会与window设置的gbk冲突 ...
- java并发编程之CompletionService
应用场景当向Executor提交多个任务并且希望获得它们在完成之后的结果,如果用FutureTask,可以循环获取task,并调用get方法去获取task执行结果,但是如果task还未完成,获取结果的 ...
- vue+webpack搭建项目
1.全局安装node.js 2.安装vue-cli 可以在项目目录安装 npm install -g vue-cli 使用vue-list命令选择webpack模板 vue init webpack ...
- Oracle在线重定义(online redefinition)--将普通表改为分区表
使用Oracle的在线重定义技术,可以将Oracle的普通表改为分区表.操作如下: STEP1:测试表是否可以在线重定义,这里以unixdev数据库的LIJIAMAN.BSTEST为例 EXEC DB ...
- SpringBoot整合Swagger2以及生产环境的安全问题处理
1.创建springboot项目 https://www.cnblogs.com/i-tao/p/8878562.html 这里我们使用多环境配置: application-dev.yml(开发环境) ...
- SpringBoot整合Eureka搭建微服务
1.创建一个services项目,添加三个子模块client(客户端).service(服务端).registry(注册中心) 1.1 创建一个services项目 1.2 添加pom.xml依赖 & ...
- layer 刷新某个页面
一:使用layer.open打开的子页面 window.parent.location.reload()//刷新父页面 var index = parent.layer.getFrameIndex(w ...