vue监听路由的改变和监听页面的刷新与离开

最新推荐文章于 2024-06-27 16:37:42 发布

reisaru

最新推荐文章于 2024-06-27 16:37:42 发布

阅读量7.7k

点赞数

分类专栏：前端 vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_41337100/article/details/106010448

版权

本文介绍了在Vue中如何监听路由改变、页面刷新和离开的场景。使用`beforeunload`监听器可以捕捉到页面刷新和离开的事件，但不能区分是路由切换还是页面离开。若需监听特定路由变化，结合Vue Router的`watch`或`beforeRouteLeave`钩子函数可以实现。此外，对于子路由变化的监听，可通过自定义的方法进行处理。

摘要由CSDN通过智能技术生成

要分清两者的区别。
首先是监听页面的刷新与离开，此时相当于直接在这个网页中按了刷新，如果是webapp则是离开这个app而不是切换路由！
如果是用js的特性监测，则是不仅可以页面的刷新与离开，还能切换路由。注意当keepalive时即使切换了路由也无效。
在script中直接增加监听器监视beforeunload：

        //监视如果页面离开
        created() {
   
            window.addEventListener('beforeunload', this.updateHandler)
        },

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

reisaru

关注关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Vue 监听路由变化

Meng_qi8816的博客

01-02

2926

方法一：通过 watch 1.1 监听,当路由发生变化的时候执行 watch: { $route(to, from) { console.log(to.path); } }, 1.2 监听,当路由发生变化的时候执行 watch: { $route: { handler: function(val, oldVal) { cons...

【前端】监听页面切换--浏览器页面间切换，路由切换，导航守卫页面刷新或关闭

灵活的小胖子

07-31

3094

前提，PC端应用一，监听浏览器页面间切换场景：浏览器某一个页面A，PC端页面B，页面AB间切换方案： 1.使用vue-visibility-change 安装： npm i vue-visibility-change -S 2.导入main.js import visibility from 'vue-visibility-change'; Vue.use(visibility); 3.使用 i，全局使用： main.js visibility.change((evt,

参与评论您还未登录，请先登录后发表或查看评论

vue实现路由监听和参数监听

10-16

今天小编就为大家分享一篇vue实现路由监听和参数监听，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

vue中监听路由参数的变化及方法

12-13

在vue项目中，假使我们在同一个路由下，只是改变路由后面的参数值，期望达到数据的更新。 mounted: () =>{ this.id = this.$route.query.id; this.getdetail() } getDetail()方法中会用到this.id这个参数，在同一页面切换id的值，并不会触发vue的声明周期函数。可以添加路由监听： watch: { $route: { handler() { this.id = this.$route.query.id; this.getDetail(); //深度

vue监听页面刷新和离开事件

最新发布

qq_25239049的博客

06-27

495

【代码】vue监听页面刷新和离开事件。

Vue中监听路由变化，来决定是否跳转页面

土豆的博客

03-15

5189

这段时间在用Vue做一个项目时，遇到了一个需求。用户如果没有登录，在点击导航栏按钮时，就不能进入某些页面。以前在用原生Js写时，这个需求都是交给后端去处理的，但因为Vue来是单页面框架，所以就不需要交给后端去处理了。最开始我是在按钮上设置了如果用户是没有登录的状态，就不执行跳转行为，但我在浏览器的URL地址栏中输入要跳转的页面地址时，就能跳转过去，没有被阻拦，最后我用了Vue中的 $route...

vue监听路由实现页面刷新

m0_45272038的博客

09-17

2723

文章目录一、监听路有变化二、vue实现页面刷新三、示例一、监听路有变化监听路有变化二、vue实现页面刷新 vue实现页面刷新三、示例监听页面刷新 watch:{ $route:{ handler(val,oldval){ // console.log(val);//新路由信息 // console.log(oldval);//老路由信息 this.id = this.$route.query.id this.$

vue项目监听浏览器刷新事件

weixin_43204464的博客

03-05

1288

【代码】vue项目监听浏览器刷新事件。

vuerouter子路由跳转脱离父页面

weixin_44825765的博客

08-23

922

我希望点击商品统计，dashboard出现在页面右下方。但是遇到的问题是：点击商品统计，直接跳转新页面。原因:注册动态路由时，往main中添加子路由，但是没有给main映射添加名字。所以浏览器控制台查看组件会发现，点击商品统计，会挂载新的app组件。丢失侧边，头部内容。解决：给main映射添加名字 ...

vue在App.vue文件中监听路由变化刷新页面操作

10-14

总体来说，Vue在App.vue文件中监听路由变化刷新页面操作涉及了多个方面的技术点，包括Vue Router的使用、JavaScript的事件监听、Vue的生命周期管理以及组件间的通信。理解这些知识点有助于开发者更好地维护和开发Vue...

vue实现路由切换改变title

哒哒哒

07-12

3671

由于vue项目通常是单页应用，因此在入口文件index.html只有一个title，单页所展示的若干页面只是随着路由的切换而在同一个index.html上不同的渲染而已，因此此时的title属性是不会随着页面的切换而变更的那么想实现路由切换title变换可以通过vue-router的导航守卫来实现，最简单的的目录结构可如下所示├── index.html ├── main.js ├── api │...

前端vue设置动态页面title，离开页面和回到页面监听

WMW_wmw的博客

05-13

763

在src\router\index.ts里 router.beforeEach((to: any, from, next) => { document.title = to.meta.title; document.addEventListener('visibilitychange', function () { // 用户息屏、或者切到后台运行（离开页面） if (document.visibilityState === 'hidden') { docume

vue 路由监听的方式

coldriversnow的专栏

08-25

1504

【代码】vue 路由监听的方式。

vue监听浏览器刷新和关闭事件，并在页面关闭/刷新前发送请求

热门推荐

weixin_42682011的博客

08-22

1万+

vue监听浏览器刷新和关闭事件，并在页面关闭/刷新前发送请求1.需求背景：2.需求分析：3.实现方式：4.实现方式解析：1）浏览器页面事件基础2）在mounted监听beforeunload和unload事件5.存在的问题/风险点：1）为了避免意外弹出窗口，在页面加载完毕的情况下，用户没有click、dbclick、touch等主动交互行为，直接执行关闭/刷新操作是不会弹出提示框的；2）浏览器提示框的样式和内容是默认的，不能更改；3）在关闭/刷新页面前发送的请求，如果使用axios方式，由于是异步的，在执行

vue-router的$route监听失效问题

曹天笑_笑笑笑的博客

12-29

5110

watch监听$route失效问题

vue 监听页面刷新或关闭

qq_46302247的博客

05-07

9160

参考：https://blog.csdn.net/weixin_43915587/article/details/93628935 发现 beforeDestroy 只能监听到页面间的跳转，无法监听到页面刷新和关闭标签页。所以还是要借助 onbeforeunload 事件。顺便复习了一下 JavaScript 中的一些加载，卸载事件：页面加载时只执行 onload 事件。页面关闭时，先 onbeforeunload 事件，再 onunload 事件。页面刷新时先执行 onbeforeunload事件

vue监听路由

qq_35134066的博客

12-06

3773

vue监听路由两种方式监听路由vue2监听路由vue3组合式api监听路由两种方式监听路由一种是使用vue2的写法，还有一种是组合式api的写法。 vue2监听路由 export default defineComponent({ watch: { $route: { handler: (val, oldVal) => { console.log(val); }, immediate: true, }, }, }); 这

vue监听路由改变触发的事件

09-19

在Vue中，可以通过watch属性来监听路由改变并触发相应的事件。具体的步骤如下：首先，在Vue组件中的watch属性中定义一个路由对象的监听器，代码如下： ``` watch: { '$route': function(newRoute, oldRoute) { // 在这里写路由改变时触发的事件逻辑代码 } } ``` 在上述代码中，`$route`是Vue提供的一个特殊的属性，用于监听当前路由的变化。`newRoute`为变化后的路由对象，`oldRoute`为变化前的路由对象。然后，可以在`'$route'`的监听函数中编写需要触发的事件逻辑代码。例如，可以在路由改变时发送请求或更新页面内容等操作。值得注意的是，如果需要在组件初始化时监听路由变化，可以在`created`生命周期钩子函数中进行定义，代码如下： ``` created() { this.$watch('$route', (newRoute, oldRoute) => { // 在这里写路由改变时触发的事件逻辑代码 }) } ``` 通过上述方式，Vue可以监听路由的变化并触发相应的事件，实现对路由变化的监听和处理。