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

原理:利用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. bat脚本延时启动exe和bat文件

    @echo off ping >nul start D:\exe\a.exe start "C:\Program Files\维护工具\卸载清除一键清理系统垃圾文件.bat" ...

  2. android中builder模式的使用

    变种的Builder模式的自动化生产实现: AS安装插件  Innerbuilde 新建User类 public class User { private final String name; //必 ...

  3. 在 Android 中进程的级别有哪些?

    a) Foreground processb) Visible processc) Service processd) Background processe) Empty process

  4. 阶段3 2.Spring_08.面向切面编程 AOP_1 AOP的概念

  5. linux:vi替换命令

    linux:vi替换命令 vi/vim 中可以使用 :s 命令来替换字符串.以前只会使用一种格式来全文替换,今天发现该命令有很多种写法(vi 真是强大啊,还有很多需要学习),记录几种在此,方便以后查询 ...

  6. PPT鼠绘必须掌握的PPT绘图三大核心功能

    在PPT制作教程栏目中,陆陆续续的分享了一系列通过合并形状功能来绘图的教程,绘制安卓机器人.绘制西瓜.绘制鸡蛋.其实,合并形状功能只是PPT绘图的一部分,而真正想要掌握PPT鼠绘,仅仅是会使用合并形状 ...

  7. Git提示要输入密码

    在服务器上Git pull或者push时,一直提示要输入密码,但这个密码又不是Gitlab账户的密码,经过同学指点,原来是项目主分支被保护起来了,处于protected的状态,因为目前只有我一个人 在 ...

  8. HDU 2100 Lovekey (26进制大数、字符串)

    Lovekey Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Sub ...

  9. dp常见优化方法

    noip范围内的dp优化方法: 加速状态转移 1.前缀和优化 2.单调队列优化 3.线段树或树状数组优化 精简状态 3:精简状态往往是通过对题目本身性质的分析,去省掉一些冗余的状态.相对以上三条套路性 ...

  10. C++中的单例类模板

    1,本节课讲述单例类模式,实现并抽取相关代码实现单例类模板,在以后开发工作 中,如果想要使用单例模式,那么直接使用今天开发的单例类模板就可以: 2,需求的提出: 1,在架构设计时,某些类在整个系统生命 ...