zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    15 react ajax 请求 github 用户信息
    14 react fetch
    13 React axios
    12 脚手架编写React项目(评论管理)---
    gitlab init project
    为什么是2MSL而不是MSL?
    mac python install zlib not available
    Laravel 传递数据到视图
    sleep(0)作用
    ping错误详解
  • 原文地址:https://www.cnblogs.com/Upton/p/8689162.html
Copyright © 2011-2022 走看看