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

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

   之前开发过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都离不开这个页面

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

posted @ 2017-07-06 19:55  无敌小坑笔  阅读(9763)  评论(0编辑  收藏