首页 > 其他分享 >vue监听浏览器主动刷新

vue监听浏览器主动刷新

时间:2022-08-19 17:15:14浏览次数:68  
标签:vue 浏览器 刷新 window beforeunloadHandler mounted 监听

 mounted() {
             window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))   //监听页面刷新触发事件
        },
 methods(){
          beforeunloadHandler(e) {    //根据事件进行操作进行操作
                console.log(e)
                console.log('浏览器刷新') 
            },
},
destroyed () {  //进行监听销毁
            window.removeEventListener('beforeunload', e =>this.beforeunloadHandler(e))
},
        

在网上找了很多都不能用,用下方这串代码,亲测有用,直接放在mounted执行即可:

 mounted() {
    window.addEventListener("load", () => {
      //写入你想要执行的代码
    });
  },

 

标签:vue,浏览器,刷新,window,beforeunloadHandler,mounted,监听
From: https://www.cnblogs.com/webljl/p/16602638.html

相关文章

  • Vue 路由
    Vue路由路由组件通常存放在pages目录,一般组件通常存放在components文件夹通过切换,“隐藏”了的路由组件,默认是被销毁的,需要的时候再去挂载每个组件都有自己的$route......
  • Vue面试题05:Vue中如何扩展一个组件(应用题)
    Vue中如何扩展一个组件按照逻辑扩展和内容扩展来列举逻辑扩展的方法:mixins、extends、compositionapi内容扩展的方法:slots使用方法、使用场景和问题混入:mixi......
  • Vue3,基于Vue3的一个自开发组件库,提供给大家参考学习使用
    简单介绍:这个组件库是个人为了学习而开发的,借鉴了elementui和bootstrap两个前端框架开发的。底层代码是基于vue3.x的。其中组件包括:1、系统内置内置样式内置动画2......
  • vue 使用 swiper
     swiper版本很多,使用起来也是各种各样的报错,下面是个人使用swiper3的步骤,目前来说感觉比较好用的安装:     [email protected]     引入:1//直接把......
  • vue项目打包后使用reverse-sourcemap反编译到源码(详解版)
    首先得说一下,vue项目中productionSourceMap这个属性。该属性对应的值为true|false。  当productionSourceMap:true,时:1、打包后能看到xxxx.js.map文件,map文件够......
  • IDEA安装element-ui报错npm ERR Found: [email protected] ERR node_modules/vuenpm ERR v
    npmERR!codeERESOLVEnpmERR!ERESOLVEunabletoresolvedependencytreenpmERR!npmERR!Whileresolving:[email protected]!......
  • iview+vue 加载进度条
    效果:浏览器最上方出现一个进度条。  main.jsimportVuefrom'vue'importViewUIfrom'view-design';importrouterfrom'./router/index.js'Vue.use(ViewUI......
  • vue3+ts项目中基本使用
    import{ref,reactive}from 'vue'  // 引入refreactive   //  ref定义响应式数据中基础数据类型  reactive定义 响应式数据中复杂数据类型  ......
  • vue响应式原理浅解
    响应式原理是通过Object.defineProperty()结合发布者订阅者模式来实现的,Object.defineProperty(obj,prop,desc)方法用来添加对象属性,并可进行监听其被获取和被修改。obj:需......
  • Vue面试题04:双向数据绑定相关
    双向数据绑定使用和原理定义:vue中双向绑定就是指v-model指令,可以绑定一个响应式数据到视图,同时视图中变化能同步改变该值。v-model是语法糖,作用在表单项和自定义组件......