watch监听不到路由的变化

最新推荐文章于 2023-09-01 15:32:16 发布
最新推荐文章于 2023-09-01 15:32:16 发布
阅读量1.7k 收藏 1
点赞数 2
CC 4.0 BY-SA版权
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u014788505/article/details/111991946
本文介绍了Vue组件中watch属性的使用，它允许监听组件状态变化，但当组件被销毁时，监听将失效。在父子路由间，watch不会错过路由变化。如果遇到组件被销毁导致监听不到的情况，可以使用<keep-alive>标签来保持组件状态，避免组件销毁。<keep-alive>的主要作用是实现组件缓存，确保组件在切换后仍然保留之前的状态。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 1. 首先watch是组件的一个属性，能监听到的前提是这个组件没有被销毁；
 2. watch在父子路由间不会出现监听不到路由变化这种情况；
 3. 监听不到是因为组件被销毁了，解决这种方法是在router-view外面
    加一层标签keep-alive标签；
 5. keep-alive存在的意义就是使组件不被销毁；

<keep-alive>
    <router-view/>
</keep-alive>
zongfunday
关注
vue.js使用watch监听路由变化的方法
12-11
watch除了可以监听数据的变化，路由的变化也能被其监听到 效果如下： 具体代码 当路由发生变化后，在watch中写具体的业务逻辑 let vm = new Vue({ el: "#app", data: {}, router, watch: { '$route.path': function (newVal, oldVal) { if (newVal === '/login') { console.log('欢迎进入登录页面'); } if (newVal === '/register') { console.log('欢迎进入注册页面');
vue在App.vue文件中监听路由变化刷新页面操作
10-14
本文介绍了如何在App.vue文件中监听路由变化，并根据这些变化来刷新页面。在Vue中，路由变化的监听可以通过Vue Router提供的导航守卫来实现，而页面的刷新则可以通过JavaScript的window.location对象来实现。 在...
vue watch监听路由失效
最新发布
前端~锋小张
09-01 837
监听路由变化时候 需要立即执行监听，否则失效。
路由监听不生效简单解决
weixin_52594927的博客
06-16 560
【代码】路由监听不生效简单解决。
vue-router的$route监听失效问题
曹天笑_笑笑笑的博客
12-29 5736
watch监听$route失效问题
vue路由监听不到怎么办？
weixin_44526505的博客
06-20 5472
vue有时候监听不到路由变化怎么办？最近在使用vue项目的时候发现我们使用的watch监听不到$route的变化，查了很多文档最终终于找到解决办法。方法一：路由包含子路由方法二：监听$route.path对象方法三：使用vue自带的路由守卫beforeRouteEnter ，beforeRouteUpdate ，beforeRouteLeave 最近在使用vue项目的时候发现我们使用的watch监听不到$route的变化，查了很多文档最终终于找到解决办法。 方法一：路由包含子路由 { name: 'ho
vue watch监听不到路由地址变化
05-24
如果上述方法依然无法监听到路由地址的变化，可能是因为你的路由地址没有发生变化。你可以在浏览器控制台中打印 `$route` 对象，观察 `$route.path` 和 `$route.query` 是否有变化。如果没有变化，可能是因为你使用...
vue中监听路由参数的变化及方法
10-15
这时，我们就需要利用Vue的`watch`功能来监听路由参数的变化，以便动态地获取新数据。 Vue的`watch`对象允许我们监听并响应数据的变化。对于路由参数，我们可以监听`$route`对象，这是一个全局注入的引用，包含了...
Vue监听路由变化 $route有时候失效怎么办
who_become_gods的博客
03-20 5537
方法一：通过 watch //方案一：监听,当路由发生变化的时候执行 watch:{ //最普通的写法 $route(to,from){ console.log(to.path); } }, //方案二：监听,当路由发生变化的时候执行 watch: { $route: { handler: function(val, oldVal){ console.log...
用watch监听路由参数变化，解决页面不刷新问题
浮游的博客
03-12 2023
问题背景 出现此类bug，大多数情况下是因为在点击知识库其他内容时，没有重新调接口。 <template> <div> <div :class="{'expand': expand}"> <div class="cata-item flex" :class="{'active': item.baseId === $route.params.id}"> <i class="nb-pull-down" :class="{'expan
vue使用watch 观察路由变化，重新获取内容
08-31
本篇文章主要介绍了vue使用watch 观察路由变化，重新获取内容 ，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
keep-alive时watch路由route引起的问题用activated解决
lk_123456的专栏
01-16 2521
不添加keep-alive每次进入页面都会重新渲染页面，添加了keep-alive后只渲染一次。但是有个小问题： 动态路由的参数改变后，还是加载以前的页面，created中的数据请求不执行。 此时如果在watch中监听$route是可以的，如果监听到 route 参数变了就重新请求数据（created 中的函数）。 上面方法可以解决，但是由于页面是 keep-alive 的，所以只要路由变了（如...
4、【转载】vue中keep-alive缓存组件不生效的坑
lizh的博客
09-10 1207
4、【转载】vue中keep-alive缓存组件不生效的坑 坑出现背景 在维护公司代码时发现里面写watch route不生效，无法监听子路由的table切换。组件不会缓存，但是全局组件已经做过缓存处理。此处每次进入此table页都会触发created周期。花费大半个小时之后终于找到了问题点 坑的原因 keep-alive缓存时include中的名字必须与组件上的名字完全一致，组件没有写名字或者名字不一致就会导致缓存失效，每次进入组件都触发created生命周期 代码如下 全局组件中 &
Vue--Router--解决watch监听路由无效的问题
IT利刃出鞘的博客
08-24 3598
说明 本文用实例介绍如何解决watch监听路由无效的问题。 需求 有两个组件：A和B，它们对应的path分别是：/a、/b。A组件引入B组件，并通过router-link跳转到B组件。想在A和B两个组件中打印出路由跳转的日志。.........
vue路由监听失效
weixin_39031037的博客
08-26 3486
场景："vue": "2.6.10" "vue-router": "3.0.2", 写法一 watch: { $route(to, from) { debugger; }, }, 亲测，监听失效 写法二 watch: { $route: { handler: function(val, oldVal){ console.log(val); }, deep: true // 深度观察监听 } }, 亲测，监...
vue 中 watch监听首次不生效解决办法
and_life的博客
05-11 3426
首次监听不到时 可以使用immediate方法，其值是true或false；immediate:true代表如果在wacth里声明了之后，就会立即执行里面的handler方法。this.handleRouteParam() // 处理路由跳转后的页面渲染数据。
vue页面已经跳转，但是watch获取不到$route
OldStreet61的博客
09-03 7285
1、问题描述： 在开发的时候使用 this.$router.push({path:"/test",query:{name:"test"}}) 进行页面跳转， 页面已经跳转至test了，并且路由显示"test?name='test' " （1）watch监听获取 $route(to, from) { console.log(this.$route);//打印空对象，获...
vue 跳转同一个页面数据不更新问题（监听路由参数）
qq_41615095的博客
06-15 600
今有需求查看通知需打开消息页面，出现连续打开只显示第一条消息，created、activated 等都不会再次触发，智能通过监听路由参数更新数据。
vue3使用watch失效的一个原因
热门推荐
qq_55014853的博客
03-07 1万+
vue3watch失效的一种原因
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值