vue中监听路由和路由参数的变化

最新推荐文章于 2025-02-11 14:54:49 发布
原创 最新推荐文章于 2025-02-11 14:54:49 发布 · 1.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

本文探讨了如何在Vue应用中解决路由参数变更不触发生命周期方法的问题，通过监听$route对象和参数变动来确保数据同步。

问题描述

在同一个路由下，只改变路由后面的参数值 / 改变路由，比如 /test?id=1 ，在这个页面中点击一个按钮后 跳转到 /test?id=2 ，但从“/test?id=1”到“ /test?id=2”是不会触发vue的生命周期的，id变了，但页面数据不会更新。

解决办法

监听路由参数的变化，在watch里监听$route和路由参数

watch: {
  $route(){   
   this.userId= this.$route.query.id
  },
 }
vue监听路由参数变化
weixin_45685544的博客
09-25 414
今天遇到一个这样的业务场景：在同一个路由下，只改变路由后面的参数值， 比如在这个页面 /aaa?id=1 ，在这个页面中点击一个按钮后 跳转到 /aaa?id=2 ， 但从“/aaa?id=1”到“ /aaa?id=2”是不会触发vue的生命周期的，id变了，但页面数据不会更新， 想要更新只能重新加载页面（手动刷新），但是这多么low、孬呀， 作为一名追求极致用户体验的开发，怎么能容忍这种情况发生； 然后就想办法监听路由参数的变化呀，在watch里监听$route和路由参数，代码如下： 复制代码 wa
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监听当前页面路由参数变化
没有酒也没有故事。
12-28 3073
vue监听路由变化
监听路由
qq_36262295的博客
11-10 1633
方法一：通过 watch // 监听,当路由发生变化的时候执行 watch:{ $route(to,from){ console.log(to.path); } }, 或者 // 监听,当路由发生变化的时候执行 watch: { $route: { handler: function(val, oldVal){ console.log(val); }, // 深度观察监听 deep: true } }, 或者 // 监听,当路由发生变化的时
Vue中监听路由参数变化的几种方式
青春木鱼的博客
08-08 1万+
在开发vue项目的过程中，经常会对某些页面或全局项目的路由进行监听，当路由发生变化的时候去执行某些操作，因此本文总结了监听路由的几种方式
vue监听路由变化
coldriversnow的专栏
04-13 776
1、 watch:{ $route(to,from){ console.log(to.path); } }, 2、 watch: { $route: { handler: function(val, oldVal){ console.log(val); }, // 深度观察监听 deep: true } }, 3、 watch: { '$route':'getPath' }, methods: { getPath()
vue监听router路由中query参数变化
qq_42103673的博客
06-08 1万+
vue监听router路由中query参数变化
vue：监听路由的变化
weixin_56341412的博客
02-11 809
【代码】vue：监听路由的变化。
前端笔记(10) Vue3 Router 监听路由参数变化
Java Spring Elasticsearch
08-11 1万+
Vue Router是开发Vue项目的必不可少的工具，也是极为重要的学习要点。本篇介绍下Vue Router的基础使用和如何监听路由参数变化。
vue如何在组件中监听路由参数的变化
lryh_的博客
08-01 626
beforeRouteUpdate
Vue笔记--Router路由--VueRouter--四、监听路由参数
一只勤勤恳恳的小前端
03-17 596
四、监听路由参数 因为通过动态路由切换组件时，并不是重新创建实例，所以生命周期钩子只能执行一次，通过监听路由参数来监听路由变化 提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调 通过watch监听$route 监听route，当路由变化时，做出响应 new Vue({ el: '#app',
Vue 监听路由变化的三种方式
热门推荐
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
08-25 3万+
方法一：通过 watch // 监听,当路由发生变化的时候执行 watch:{ $route(to,from){ console.log(to.path); } }, 或 // 监听,当路由发生变化的时候执行 watch: { $route: { handler: function(val, oldVal){ console.log(val); }, // 深度观察监听 deep: true } }, 或 // 监听,..
vue监听路由变化的方式
qq_45585640的博客
02-09 1981
监听路由变化的几种方式小结
vue监听路由参数
m0_56713958的博客
11-30 539
【代码】vue监听路由参数。
vue中监听路由参数的变化，并对参数变化后作出一些响应（动态路由下参数的变化）
yinge0508的博客
03-24 1788
记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察$route对象来应对这些变化，或使用beforeRouteUpdate的组件内守卫。 当多个路由都匹配一个动态路由时，比如 "/user/123" , "/user/456" 都匹配下面的路由 { name:'dancanshu', path: '/user/:id',//单参数路由匹配 c...
vue实战指南 vue项目监听页面变化
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
10-07 2052
本文将详细介绍如何在Vue项目中实现页面变化监听，包括但不限于路由变化、数据变化、生命周期钩子等，旨在为开发者提供一个全面的技术指南。通过上述内容的学习，希望读者不仅能掌握Vue项目中监听页面变化的基本方法，还能深入了解Vue框架背后的原理，从而在实际项目中更加灵活高效地运用Vue。在上面的例子中，当组件创建完成时会打印一条消息，而每当组件数据发生变化并导致DOM重新渲染后，也会打印出相应的消息。接下来，在你的Vue项目中配置路由模块，并添加一个监听路由变化的方法。对象的哪个属性发生变化，都会触发监听器。
vue项目监听路由参数变化重新加载页面
最新发布
09-27
在Vue项目中，不同版本监听路由参数变化并重新加载页面的方法有所不同。 ### Vue 2.x 在Vue 2项目里，可在组件中使用`watch`来监听`$route`对象的变化，当路由参数改变时，可调用`this.$router.go(0)`来重新加载页面。示例代码如下： ```vue <template> <!-- 组件模板 --> <div> <!-- 页面内容 --> </div> </template> <script> export default { watch: { '$route': { handler(newRoute, oldRoute) { // 当路由参数变化时重新加载页面 this.$router.go(0); }, deep: true } } } </script> ``` 也可以在全局路由守卫里监听路由变化，示例如下： ```javascript import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const routes = [ { path: '/', component: Home }, { path: '/about', component: About } ] const router = new VueRouter({ routes }) router.beforeEach((to, from, next) => { if (to.path === from.path && JSON.stringify(to.query) !== JSON.stringify(from.query)) { // 路由路径相同但参数不同，重新加载页面 window.location.reload(); } next(); }); new Vue({ router }).$mount('#app') ``` ### Vue 3.x 在Vue 3项目中，可使用`watch`函数来监听`router.currentRoute.value`的变化。当路由参数改变时，同样可以使用`window.location.reload()`来重新加载页面。示例代码如下： ```vue <template> <!-- 组件模板 --> <div> <!-- 页面内容 --> </div> </template> <script setup> import { watch } from 'vue'; import { useRouter, useRoute } from 'vue-router'; const router = useRouter(); const route = useRoute(); watch( () => route.fullPath, (newPath, oldPath) => { // 当路由参数变化时重新加载页面 window.location.reload(); }, { immediate: false, deep: true } ); </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值