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 相关文章推荐
JS获取并操作iframe中元素的方法
Mar 21 Javascript
javascript eval(func())使用示例
Dec 05 Javascript
JS的document.all函数使用示例
Dec 30 Javascript
一张表格告诉你windows.onload()与$(document).ready()的区别
May 16 Javascript
js实现页面跳转重定向的几种方式
May 29 Javascript
javascript快速排序算法详解
Sep 17 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
Nov 29 Javascript
jquery模拟实现鼠标指针停止运动事件
Jan 12 Javascript
理解javascript中Map代替循环
Feb 26 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
Oct 10 Javascript
学习JS中的DOM节点以及操作
Apr 30 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
Jan 09 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
DC《神奇女侠2》因疫情推迟上映 温子仁新恐怖片《恶性》撤档
2020/04/09 欧美动漫
php常用的url处理函数总结
2014/11/19 PHP
php使用数组填充下拉列表框的方法
2015/03/31 PHP
PHP让数组中有相同值的组成新的数组实例
2017/12/31 PHP
php探针不显示内存解决方法
2019/09/17 PHP
DEFER怎么用?
2006/07/01 Javascript
Jquery 常用方法经典总结
2010/01/28 Javascript
jquery getScript动态加载JS方法改进详解
2012/11/15 Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
2015/02/26 Javascript
纯css实现窗户玻璃雨滴逼真效果
2015/08/23 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
2015/08/24 Javascript
jQuery 3.0 的变化及使用方法
2016/02/01 Javascript
jQuery实现验证码功能
2017/03/17 Javascript
angular4 如何在全局设置路由跳转动画的方法
2017/08/30 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
2020/04/26 Javascript
Python在Windows和在Linux下调用动态链接库的教程
2015/08/18 Python
python学习入门细节知识点
2018/03/29 Python
利用pandas进行大文件计数处理的方法
2018/07/25 Python
python用BeautifulSoup库简单爬虫实例分析
2018/07/30 Python
Python打包方法Pyinstaller的使用
2018/10/09 Python
spark dataframe 将一列展开,把该列所有值都变成新列的方法
2019/01/29 Python
浅析PyTorch中nn.Linear的使用
2019/08/18 Python
python xlwt如何设置单元格的自定义背景颜色
2019/09/03 Python
基于Python实现ComicReaper漫画自动爬取脚本过程解析
2019/11/11 Python
python numpy数组复制使用实例解析
2020/01/10 Python
关于python中remove的一些坑小结
2021/01/04 Python
CSS3之边框多颜色Border-color属性使用示例
2013/10/11 HTML / CSS
全球速卖通巴西站点:Aliexpress巴西
2016/08/24 全球购物
大学毕业生通用自荐信范文
2013/10/31 职场文书
大学校运会广播稿
2014/02/03 职场文书
风雨哈佛路观后感
2015/06/03 职场文书
房产证明范本
2015/06/19 职场文书
幼儿园托班开学寄语(2016春季)
2015/12/03 职场文书
党员公开承诺书(2016最新版)
2016/03/24 职场文书
详解CSS不定宽溢出文本适配滚动
2021/05/24 HTML / CSS
vue项目打包后路由错误的解决方法
2022/04/13 Vue.js