Vue - 监听页面刷新和关闭

一,在 created中 注册 页面刷新和关闭事件

created() {

 window.addEventListener(‘beforeunload‘, e => this.test(e))

}

二,事件,将你的逻辑方法加进去

methods: {

 test(e) {

  console.log(‘刷新或关闭‘)

  // ...

 }

}

三,卸载注册的事件

destroyed() {

 window.removeEventListener(‘beforeunload‘, e => this.test(e))

}

原文地址:https://www.cnblogs.com/500m/p/12109744.html

时间: 2024-10-01 09:06:55

Vue - 监听页面刷新和关闭的相关文章

js 监听浏览器刷新还是关闭事件

原作者的文章地址:http://udn.yyuap.com/forum.php?mod=viewthread&tid=96309 页面加载时只执行onload 页面关闭时只执行onunload 页面刷新时先执行onbeforeunload,然后onunload,最后onload. 经过验证我得出的结论是: //对于ie,谷歌,360: //页面加载时只执行onload //页面刷新时,刷新之前执行onbeforeunload事件,在新页面即将替换旧页面时onunload事件,最后onload事件

vue监听滚动事件 实现动态锚点

前几天做项目的时候,需要实现一个动态锚点的效果 如果是传统项目,这个效果就非常简单.但是放到 Vue 中,就有两大难题: 1. 在没有 jQuery 的 animate() 方法的情况下,如何实现平滑滚动? 2. 如何监听页面滚动事件? 在浏览了大量文章.进行多次尝试之后,终于解决了这些问题 期间主要涉及到了 setTimeout 的递归用法,和 Vue 生命周期中的 mounted 一.锚点实现 在实现平滑滚动之前,得先确保基本的锚点功能 如果没有其他要求,直接用 <a href="#i

vue监听滑动事件,隐藏移动端键盘或者input失去焦点

在页面加载的地方mounted或者created写监听事件,注意使用touchmove事件 window.addEventListener("touchmove",this.myTouchMove) // 监听滑动事件 // 滑动关闭键盘 myTouchMove: function (evt) { if(document.hasFocus){ const inputId = document.getElementById('myBox') // 获取ID inputId.blur()

vue监听滚动事件,实现滚动监听

在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="https://unpkg

用js判断页面刷新或关闭的方法

onbeforeunload与onunload事件 Onunload,onbeforeunload都是在刷新或关闭时调用,可以在<script>脚本中通过window.onunload来指定或者在<body>里指定.区别在于onbeforeunload在onunload之前执行,它还可以阻止onunload的执行. Onbeforeunload也是在页面刷新或关闭时调用,Onbeforeunload是正要去服务器读取新的页面时调用,此时还没开始读取:而onunload则已经从服务器

监听tomcat服务器启动/关闭并从配置文件中读取参数进行初始化

监听tomcat服务器启动/关闭很简单(2步): 1. 建立一个类实现ServletContextListener接口,重写其中的方法(contextDestroyed和contextInitialized). package action; import javax.servlet.ServletContextEvent; import javax.servlet.ServletContextListener; public class SystemListener implements Se

Oracle启动和关闭、监听服务的启动/关闭

一:sql*plus启动/关闭: 1.Sqlplus /nolog 启动sql*plus[不连接数据库的方式] 2.conn / as sysdba 以DBA的身份连接到 oracle 3.startup 启动数据库 数据库启动有三种方式及应用场景 1> 正常启动      startup  [open]  启动顺序:1.启动实例[参数文件],创建后台进程及服务   2.为实例加载数据库[控制文件].加载数据库将打开控制文件, 获取数据库名称.数据文件的位置和名称等关于数据库物理结构的信息,为打

react 监听页面滚动

html: // 如果使用typescript, 定义dom类型 private dom: HTMLDivElement | null // ReactJS中,对Div监听只需要绑定 onScrollCapture事件 <div style={{ flex: 1, height: '10000px', overflowY: 'scroll', overflowX: 'hidden', }} ref={dom => {this.dom = dom}} onScrollCapture={() =&

C# NanUI WinFormium监听页面加载开始\结束

个人博客 地址:https://www.wenhaofan.com/article/20190501213608 因为NanUI文档中仅介绍了Formium窗口的监听,但是没有WinFormium相关的文档,查看源码后才找到监听方法,特此记录一下 public partial class Form1 : WinFormium {public Form1(): base("http://res.app.local/asserts/index.html") { InitializeComp