乐趣区

关于vue.js:vue项目阻止浏览器后退操作

应用 history.pushState(state, title, url) 办法

参数
state

状态对象是一个 JavaScript 对象,它与 pushState() 创立的新历史记录条目相关联。每当用户导航到新状态时,都会触发 popstate (en-US) 事件,并且该事件的状态属性蕴含历史记录条目标状态对象的正本。
状态对象能够是任何能够序列化的对象。因为 Firefox 将状态对象保留到用户的磁盘上,以便用户重新启动浏览器后能够将其还原,所以咱们对状态对象的序列化示意施加了 640k 个字符的大小限度。如果将序列化示意模式大于此状态的状态对象传递给 pushState(),则该办法将引发异样。如果您须要更多空间,建议您应用 sessionStorage 或者 localStorage。

title

以后大多数浏览器都疏忽此参数,只管未来可能会应用它。在此处传递空字符串应该能够避免未来对办法的更改。或者,您能够为要挪动的状态传递简短的题目。

url 可选

新历史记录条目标 URL 由此参数指定。请留神,浏览器不会在调用 pushState() 之后尝试加载此 URL,但可能会稍后尝试加载 URL,例如在用户重新启动浏览器之后。新的 URL 不用是相对的。如果是绝对的,则绝对于以后 URL 进行解析。新网址必须与以后网址雷同 origin;否则,pushState() 将引发异样。如果未指定此参数,则将其设置为文档的以后 URL。

联合 vue-router 钩子函数,将 url 设定为以后页面的 url。

我本人在实战中的代码:

beforeRouteUpdate(to,from,next){
  // 判断是不是点击的后退按钮 , 当点击后退按钮的时候以后 url 和 to.fullPath 一样
  if((location.pathname+location.search)==to.from.fullPath){history.pushState(null,null,location.href);
     return
  }
}

完结!
欢送指教,虚心好学!

退出移动版