需求背景:项目中需要做一个返回确认,避免用户误触返回键而退出当前页面。

原理:利用history和浏览器刷新popstate状态

实现:

1、在mounted() 阶段判断并添加popstate事件监听,History.pushState()(参数:一个状态对象,一个标题(现在被忽略了),以及一个可选的URL地址), 注意:IOS版的微信,是会立即触发popstate事件,所以需要pageshow做下处理,(当一条会话历史记录被执行的时候将会触发页面显示(pageshow)事件。(这包括了后退/前进按钮操作,同时也会在onload 事件触发后初始化页面时触发))

2、在methods里定义监听操作函数

3、页面销毁时,取消监听。(注意:一定要取消监听,否则其他vue路由页面也会被监听)

vue项目中利用popstate处理页面返回操作的更多相关文章

  1. vue项目中使用mockjs模拟接口返回数据

    Mock.js 是一个模拟数据生成器,利用它,可以拦截ajax请求,直接模拟返回数据,这样前后端只要约定好数据格式,前端就不需要依赖后端的接口,可以直接使用模拟的数据了. 网上介绍mock的教程也较多 ...

  2. 在Vue项目中使用html2canvas生成页面截图并上传

    使用方法 项目中引入 npm install html2canvas html代码 //html代码 <!-- 把需要生成截图的元素放在一个元素容器里,设置一个ref --> <di ...

  3. 在vue项目中添加一个html页面,开启本地服务器

    在vue项目里新增一个不需要登录的页面,那么我只能新增一个html页面了,不经过路由,直接在浏览器输入路径打开,那么就需要用到本地服务器, 1.vue里面的html页面最好放过在public文件夹里面 ...

  4. Vue项目中设置每个单页面的标题

    两种实现方法,第一种方法引入插件,第二种为编程方式实现(推荐) 首先在路由文件index.js中给每个单页面路由添加title routes: [{     path: '/',     name: ...

  5. vue项目中阻止浏览器返回上一页

    vue项目中在某个页面阻止浏览器返回上一页,适用移动端.PC端. 使用场景例如: 首页 与 A页面     来回跳转,那样点击浏览器返回时也会来回跳转,本想当页面在首页的时候就不再返回了,所以这个时候 ...

  6. vue项目中使用mockjs+axios模拟后台数据返回

    自己写练手项目的时候常常会遇到一个问题,没有后台接口,获取数据总是很麻烦,于是在网上找了下,发现一个挺好用的模拟后台接口数据的工具:mockjs.现在把自己在项目中使用的方法贴出来   先看下项目的目 ...

  7. vue项目中使用Lodop实现批量打印html页面和pdf文件

    1.Lodop是什么? Lodop(标音:劳道谱,俗称:露肚皮)是专业WEB控件,用它既可裁剪输出页面内容,又可用程序代码直接实现复杂打印.控件功能强大,却简单易用,所有调用如同JavaScript扩 ...

  8. vue 项目中当访问路由不存在的时候默认访问404页面

    前言: 在Vue项目中,当访问的页面路由不存在或错误时,页面显示为一片空白.然而,通常我们需要对访问url不存在或者错误的情况下添加默认的404页面,即not found页面. 一般的处理方法是: 在 ...

  9. 解决在Vue项目中时常因为代码缩进导致页面报错的问题

    前言 如果我们初次使用vue-cli来构建单页SPA应用,在撸代码的过程中有可能会遇到这种因为代码缩进导致 页面报错的问题,导致我们烦不胜烦.接下来我们就来看一看如何解决这个小问题... erro原因 ...

随机推荐

  1. 一些 postman

    听了:https://v.qq.com/x/page/f0816egftuw.html npm 是 node package manager, Nodejs下的包管理器.安装完 nodejs 后(no ...

  2. Linux_LVM&Quota

    目录 目录 磁盘分区RHEL6 磁盘管理指令 mount fdisk lvm LVM图形化 quota quota指令 磁盘分区RHEL6 磁盘管理指令 cfdisk -l 查询分区状况 df -Th ...

  3. 阶段3 2.Spring_10.Spring中事务控制_3 作业-基于注解的AOP实现事务控制及问题分析_下

    此时没有异常 测试我们的方法 执行报错 注解在实际的测试过程中,实际的执行顺序是有问题的.会先调用最终通知.然后再调用后置通知 最终通知已经关闭了连接.再调用后置通知肯定报错. getThreadCo ...

  4. python学习笔记:(九)循环(for和while)

    在python中循环包括for和while 1.while循环 while 判断条件: statements ----表示:判断条件为真时执行statements,为假不执行 2.for语句 for ...

  5. 微信小程序的生命周期和APP对象的使用

    1.生命周期和APP对象的使用: //app.js App({ onLaunch: function () { //调用API从本地缓存中获取数据 var logs = wx.getStorageSy ...

  6. 【Qt开发】QScrollArea添加布局后没有出现滚动条的解决方法

    [Qt开发]QScrollArea添加布局后没有出现滚动条的解决方法 标签:[Qt开发] 说明:尝试利用滚动区域显示多张图片,为了能够动态地往滚动区域贴图,为滚动区域设置了布局,然后通过布局来添加wi ...

  7. Java基础/网络经验

    一.Java新特性好文--掘金 1.Java8 新特性指导手册 2.Java 11 已发布,String 还能这样玩 二.Java避坑 1.为什么阿里巴巴不建议在for循环中使用"+&quo ...

  8. IF-ELSE嵌套练习

    一,1,编写程序,由键盘输入三个整数分别存入变量num1,num2,num3中,对它们进行排序,使用if-else结构,并按从小到大的顺序输出: package practice; import ja ...

  9. java中的多态关系的运用

    1.多态发生的三个必备条件 继承.重写.父类引用指向子类对象 2.注意 当使用多态方式调用方法时,首先检查父类中是否有该方法,如果没有,则编译错误:如果有,再去调用子类的同名方法. 方法的重写,也就是 ...

  10. python 类(2)

    """ """class BaseCat(object): """ 猫科基础类""&quo ...