Vue 禁用浏览器的前进后退操作


Posted in Javascript onSeptember 04, 2020

一.禁用前进后退功能

在开发vue应用中,如何禁用浏览器的前进后退功能呢?

网上搜到的答案基本如下:

history.pushState(null, null, document.URL)
window.addEventListener('popstate', function() {
 history.pushState(null, null, document.URL)
})

但应该放在哪儿?

经过尝试,我是如此写的:

main.js中,增加popstate监听

window.addEventListener('popstate', function() {
 history.pushState(null, null, document.URL)
})

router的index.js中:

const router = new Router({
 mode: 'hash',
 routes,
 scrollBehavior: () => {
  history.pushState(null, null, document.URL)
 }
})

这里我将pushState放在了scrollBehavior中。当然,你也可以尝试放在router的beforeEach/afterEach中

router.afterEach((to, from) => {
 history.pushState(null, null, location.protocol + '//' + location.host + '/#' + to.path)
})

不过这里的URL就不能使用document.URL了,因为此时的 document.URL 指向的是上一页面的 URL,这会导致第一次页面回退禁用无效。

二、history

history 对象包含浏览器历史。

常见属性/方法:

history.length - 属性保存着历史记录的URL数量;

history.back() - 等同于在浏览器点击后退按钮;

history.forward() - 等同于在浏览器中点击前进按钮;

history.go() - 加载 history 列表中的某个具体页面。

H5新增了属性/方法/事件:

history.state - 属性用来保存记录对象;

history.pushState() - 向浏览器的历史记录中添加一个状态;

history.replaceState() - 修改当前历史记录实体;

popstate事件 - 当活动历史记录条目更改时,将触发

1.history.state

返回当前页面的state对象

2.history.pushState(state, title, url)

state: 状态对象可以是任何可以序列化的对象。

title: 当前大多数浏览器都忽略此参数,尽管将来可能会使用它。

url: 新历史记录条目的URL由此参数指定。如果未指定此参数,则将其设置为文档的当前URL。

3.history.replaceState(state, title, url)

修改当前历史记录实体,如果你想更新当前的state对象或者当前历史实体的URL来响应用户的的动作的话这个方法将会非常有用。

参数与pushState类似。

4.popstate事件

当活动历史记录条目更改时,将触发popstate事件。

需要注意的是调用history.pushState()或history.replaceState()不会触发popstate事件。只有在做出浏览器动作时,才会触发该事件,如用户点击浏览器的回退按钮(或者在Javascript代码中调用history.back()或者history.forward()方法)。

不同的浏览器在加载页面时处理popstate事件的形式存在差异。页面加载时Chrome和Safari通常会触发(emit )popstate事件,但Firefox则不会。

补充知识:vue实现前进刷新,后退不刷新心得

最近在用vue做移动端的项目。希望实现前进刷新、后退不刷新的效果。即加载过的界面能缓存起来(返回不用重新加载),关闭的界面能被销毁掉(再进入时重新加载)。例如对a->b 前进(b)刷新,b->a 后退(a)不刷新。

需求:

默认显示 A

B 跳到 A,A 不刷新

C 跳到 A,A 刷新

实现方式:

在 A 路由里面设置 meta 属性

Vue 禁用浏览器的前进后退操作

Vue 禁用浏览器的前进后退操作

在 B 组件里面设置 beforeRouteLeave:

Vue 禁用浏览器的前进后退操作

vue新手注意:在App.vue中配置缓存的视图组件

在 C 组件里面设置 beforeRouteLeave:

Vue 禁用浏览器的前进后退操作

以上这篇Vue 禁用浏览器的前进后退操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery实现图片左右切换的方法
May 07 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
May 28 Javascript
JavaScript——DOM操作——Window.document对象详解
Jul 14 Javascript
easyUI下拉列表点击事件使用方法
May 18 Javascript
Kotlin学习第一步 kotlin语法特性
May 25 Javascript
详解关于vue-area-linkage走过的坑
Jun 27 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
Jan 30 Javascript
Vue项目数据动态过滤实践及实现思路
Sep 11 Javascript
js getBoundingClientRect使用方法详解
Jul 17 Javascript
js获取本日、本周、本月的时间代码
Feb 01 Javascript
js实现电灯开关效果
Jan 19 Javascript
小程序自定义轮播图圆点组件
Jun 25 Javascript
详解JavaScript数据类型和判断方法
Sep 04 #Javascript
vue将data恢复到初始状态 && 重新渲染组件实例
Sep 04 #Javascript
详解JavaScript中new操作符的解析和实现
Sep 04 #Javascript
我所理解的JavaScript中的this指向
Sep 04 #Javascript
JS运算符优先级与表达式示例详解
Sep 04 #Javascript
vue中的循环对象属性和属性值用法
Sep 04 #Javascript
JavaScript逻辑运算符相关总结
Sep 04 #Javascript
You might like
Laravel 5.4因特殊字段太长导致migrations报错的解决
2017/10/22 PHP
js(jQuery)获取时间的方法及常用时间类搜集
2013/10/23 Javascript
jquery(hide方法)隐藏指定元素实例
2013/11/11 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
2015/02/17 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
2015/09/16 Javascript
JavaScript中ES6 Babel正确安装过程
2016/07/18 Javascript
js获取json中key所对应的value值的简单方法
2020/06/17 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
2017/05/17 Javascript
利用 spin.js 生成等待效果(js 等待效果)
2017/06/25 Javascript
vue.js中父组件调用子组件的内部方法示例
2017/10/22 Javascript
基于jQuery实现无缝轮播与左右点击效果
2018/05/13 jQuery
详解在网页上通过JS实现文本的语音朗读
2019/03/28 Javascript
一次让你了解全部JavaScript的作用域
2019/06/24 Javascript
详解利用eventemitter2实现Vue组件通信
2019/11/04 Javascript
JavaScript中的相等操作符使用详解
2019/12/21 Javascript
python 用opencv调用训练好的模型进行识别的方法
2018/12/07 Python
对python 自定义协议的方法详解
2019/02/13 Python
Python创建字典的八种方式
2019/02/27 Python
Python流程控制 while循环实现解析
2019/09/02 Python
使用CSS3配合IE滤镜实现渐变和投影的效果
2015/09/06 HTML / CSS
详解html5 shiv.js和respond.min.js
2018/01/24 HTML / CSS
HTML5 视频播放(video),JavaScript控制视频的实例代码
2018/10/08 HTML / CSS
匡威比利时官网:Converse Belgium
2017/04/13 全球购物
美国校园市场:OCM
2017/06/08 全球购物
Boolean b = new Boolean(“abcde”); 会编译错误码
2013/11/27 面试题
工作自我评价怎么写
2014/01/29 职场文书
农村改厕实施方案
2014/03/22 职场文书
作文评语大全
2014/04/23 职场文书
消防安全宣传标语
2014/06/07 职场文书
团日活动总结报告
2014/06/25 职场文书
员工试用期自我鉴定范文
2014/09/15 职场文书
2014年技术工作总结范文
2014/11/20 职场文书
2015年三万活动总结
2015/03/25 职场文书
生日赠语
2015/06/23 职场文书
商业计划书格式、范文
2019/03/21 职场文书
pytorch 使用半精度模型部署的操作
2021/05/24 Python