• 禁止页面回退到某个页面(如避免登录成功的用户返回到登录页)


       在开发中可能会有这样的需求:在登录成功后不想让用户再返回到登录页,支付成功后不想用户再返回到支付页。

       之前开发过hybrid app流应用,他们的处理机制是,登录成功后,杀死登录页。最近在开发微信公众号,我就在想h5能不能也做到类似的效果,避免回退到不想出现的页面。单页面应用,总不能自杀,或者让组件隐藏吧,就百度了一下,还真找到了相关的api。

      HTML5为history对象添加了两个新方法,history.pushState()history.replaceState(),用来在浏览历史中添加和修改记录。var stateObj = { foo: "TEST" }; history.pushState(stateObj, "page 1", "test.html");这种方法将会使你当前的url地址变为https://i.cnblogs.com/test.html,但浏览器不会加载https://i.cnblogs.com/test.html页面,即使这个页面存在也不会加载。现在再次假设用户继续访问http://www.baidu.com,然后点击后退。这时,url地址栏将会,https://i.cnblogs.com/test.html
     history.replaceState() 用起来很像pushState(),除了replaceState()是用来修改当前的history实体而不是创建一个新的。这个方法有时会很有用,当 你需要对某些用户行为作反应而更新一个state对象或者当前history实体时,可以使用它来更新state对象或者当前history实体的url

      是不是看到这儿有点懵了,vue-router用起来会清爽一点

    • router.push(location) history中会有记录

    • router.replace(location) history中不会有记录

    • router.go(n) 在history记录中向前跳转几页或者向后几页

       router.push、 router.replace 和 router.go 跟 window.history.pushState、 window.history.replaceState 和 window.history.go好像, 实际上它们确实是效仿 window.history API 的。

      实际使用过程中

       link标签跳转时,添加:replace=true,即可以不保留历史记录跳转

       或者用

             router.replace({path: 'login',query:{})

       如果这些还不够用,router还有个钩子,beforeRouteLeave,这个是用在单独组件中的,监听组件离开当前页,包括返回键,如果用了这个钩子,不写要跳转的到的页面,连back都离不开这个页面

      按照你的需要,哪些页面不需要保存历史记录访问,哪些页面需要重写,捋一下就很清楚了,就不多说了。   

  • 相关阅读:
    接口的经典使用方法
    多态的程序例子
    log4j常用配置过程
    log4j.properties对于web app摆放的位置
    MySQL优化实例
    No sql 相关
    yii直接执行sql
    android NDK JNI设置自己的log输出函数
    android web 网址收集
    WebKit加载网页的流程
  • 原文地址:https://www.cnblogs.com/cjh1111/p/7128104.html
Copyright © 2020-2023  润新知