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

原理:利用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. leetcode 83删除排序链表中的重复元素

    /** * Definition for singly-linked list. * struct ListNode { * int val; * ListNode *next; * ListNode ...

  2. PLSQL查看表创建语句

    在我们想要查看的表上右键选择view:

  3. android开源图表库MPAndroidChart(曲线图、直方图、饼状图)

    github地址:https://github.com/PhilJay/MPAndroidChart 添加依赖: Add the following to your project level bui ...

  4. 如何保存 Activity 的状态?

    Activity 的状态通常情况下系统会自动保存的,只有当我们需要保存额外的数据时才需要使用到这样的功能.一般来说, 调用 onPause()和 onStop()方法后的 activity 实例仍然存 ...

  5. apache禁止指定的user_agent访问

    user_agent:也就是浏览器标识#禁止指定user_agent <IfModule mod_rewrite.c> RewriteEngine on RewriteCond %{HTT ...

  6. win server2012r2上发布网站常见错误 "HTTP 错误 500.19 请求的页面的相关配置数据无效" 解决办法

    HTTP 错误 500.19 - Internal Server Error无法访问请求的页面,因为该页的相关配置数据无效. 问题“详细错误信息模块 IIS Web Core通知 BeginReque ...

  7. 【VS开发】【Qt开发】使用process explorer查看exe调用dll的情况

    打开process explorer 选中想要查看句柄或者加载的dll的进程,比如下面截图红框中的 chrome.exe 菜单点击view / Lower Pane View,其下有DLLS和Hand ...

  8. go的变量定义

    package main //理解包的概念 import "fmt" var ( aa = 1 bb = "kkk" ss = true) func varia ...

  9. python 进程和串行(——)

    进程 1.什么是串行? 串行:就是一个程序完完整整的运行完了,下个程序才运行. 2.什么是进程? 进程:一个正在运行的程序或一个程序运行的过程. 为什么要用进程. 提高程序执行效率. 多道技术:并发技 ...

  10. python 包的概念

    包的概念 包的概念: 在python中包即使模块,是一系列功能的集合体, 为什么要用包? 提高开发效率 如何用包 import ... from ... import ..... 如何认识它就是一包 ...