[vuejs/vue-router]请问,$router.push/replace跳转后,如何清除之前的histroy,我想实现不可退回的效果

2024-01-03 784 views
8

1--(push)-->2--(push)-->3--(push)-->end

在经过一系列的跳转后,到达最终end页时。用户通过浏览器back会一直回退到1

印象中replace只是替换当前路由页 1--(push)-->2--(push)-->3--(replace)-->end 此时在end页点击back,应该跳回2

我希望到用户在end,无法回退跳回之前的页面? 请指教,谢谢

回答

1

history 没有清除记录这样的 API,但是可以做个小的 hack:

在进入 end 页面时 pushState 一条相同的历史记录 end,用户点击返回键的时候会触发 popstate 事件,这时默认会回到第一条 end 的历史记录,在事件回调中手动再 pushState 一条 end 的历史记录,如此用户点击返回时便会被困在 end 页面,除非跳到其他页面去。

3

的确是个hack方式,有点不甘心

2

也可以用 this.$router.go(-100); 把所有的都退出去就好了