登录成功后不想让用户再返回到登录页,支付成功后不想用户再返回到支付页。

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

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

history.pushState()和history.replaceState(),用来在浏览历史中添加和修改记录。var stateObj = { foo: "TEST" }; history.pushState(stateObj, "page 1", "test.html");这种方法将会使你当前的url地址变为,但浏览器不会加载页面,即使这个页面存在也不会加载。现在再次假设用户继续访问http://www.baidu.com,然后点击后退。这时,url地址栏将会,,

更新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 的。

实际使用过程中

:replace=true,即可以不保留历史记录跳转

   或者用

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

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

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