watch监听不到路由的变化

最新推荐文章于 2023-09-01 15:32:16 发布
原创 最新推荐文章于 2023-09-01 15:32:16 发布 · 1.7k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

本文介绍了Vue组件中watch属性的使用，它允许监听组件状态变化，但当组件被销毁时，监听将失效。在父子路由间，watch不会错过路由变化。如果遇到组件被销毁导致监听不到的情况，可以使用<keep-alive>标签来保持组件状态，避免组件销毁。<keep-alive>的主要作用是实现组件缓存，确保组件在切换后仍然保留之前的状态。 
 1. 首先watch是组件的一个属性，能监听到的前提是这个组件没有被销毁；
 2. watch在父子路由间不会出现监听不到路由变化这种情况；
 3. 监听不到是因为组件被销毁了，解决这种方法是在router-view外面
    加一层标签keep-alive标签；
 5. keep-alive存在的意义就是使组件不被销毁；

<keep-alive>
    <router-view/>
</keep-alive>
zongfunday
关注
vue3中监听路由，被重复执行问题
wangyuiba1314的博客
05-11 3580
vue3中监听路由，被重复执行问题 项目场景：监听route变化，当已经离开了页面，watch却还在被触发 问题描述 本来我是在Layout文件中监听了路由 但是我发现我前往非Layout下的路由,比如404页面，watch依旧被触发，并且从404页面返回时，watch会一直执行两次，除非刷新 Layout/index.vue watch(() => route, (val) => { // ... }, { immediate: true, deep: true
使用watch监听route对象的变化
最新发布
casually的博客
03-02 715
我们在vue项目中，有时候需要监听路由的变化，来做出一些操作，下面就是一些案例。
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--Router--解决watch监听路由无效的问题
IT利刃出鞘的博客
08-24 3772
说明 本文用实例介绍如何解决watch监听路由无效的问题。 需求 有两个组件：A和B，它们对应的path分别是：/a、/b。A组件引入B组件，并通过router-link跳转到B组件。想在A和B两个组件中打印出路由跳转的日志。.........
vue watch监听路由失效
前端~锋小张
09-01 873
监听路由变化时候 需要立即执行监听，否则失效。
路由监听不生效简单解决
weixin_52594927的博客
06-16 607
【代码】路由监听不生效简单解决。
vue在App.vue文件中监听路由变化刷新页面操作
10-14
本文介绍了如何在App.vue文件中监听路由变化，并根据这些变化来刷新页面。在Vue中，路由变化的监听可以通过Vue Router提供的导航守卫来实现，而页面的刷新则可以通过JavaScript的window.location对象来实现。 在...
vue watch监听不到路由地址变化
05-24
如果上述方法依然无法监听到路由地址的变化，可能是因为你的路由地址没有发生变化。你可以在浏览器控制台中打印 `$route` 对象，观察 `$route.path` 和 `$route.query` 是否有变化。如果没有变化，可能是因为你使用...
vue watch 监听不到变化_vue2.0 router内watch监听不到route变化？
weixin_34696129的博客
12-24 1028
简单的两个路由，就无法监听到路由变化，不知道怎么回事var router = new VueRouter({routes: [{name: 'home',component: {template: 'test home',watch: {'$route': function(route) {// 监听不到变化？？console.log('home', route);}}},path: '/',},...
vue-router的$route监听失效问题
曹天笑_笑笑笑的博客
12-29 5849
watch监听$route失效问题
vue路由监听不到怎么办？
weixin_44526505的博客
06-20 5556
vue有时候监听不到路由变化怎么办？最近在使用vue项目的时候发现我们使用的watch监听不到$route的变化，查了很多文档最终终于找到解决办法。方法一：路由包含子路由方法二：监听$route.path对象方法三：使用vue自带的路由守卫beforeRouteEnter ，beforeRouteUpdate ，beforeRouteLeave 最近在使用vue项目的时候发现我们使用的watch监听不到$route的变化，查了很多文档最终终于找到解决办法。 方法一：路由包含子路由 { name: 'ho
Vue监听路由变化 $route有时候失效怎么办
who_become_gods的博客
03-20 5568
方法一：通过 watch //方案一：监听,当路由发生变化的时候执行 watch:{ //最普通的写法 $route(to,from){ console.log(to.path); } }, //方案二：监听,当路由发生变化的时候执行 watch: { $route: { handler: function(val, oldVal){ console.log...
用watch监听路由参数变化，解决页面不刷新问题
浮游的博客
03-12 2079
问题背景 出现此类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
keep-alive时watch路由route引起的问题用activated解决
lk_123456的专栏
01-16 2577
不添加keep-alive每次进入页面都会重新渲染页面，添加了keep-alive后只渲染一次。但是有个小问题： 动态路由的参数改变后，还是加载以前的页面，created中的数据请求不执行。 此时如果在watch中监听$route是可以的，如果监听到 route 参数变了就重新请求数据（created 中的函数）。 上面方法可以解决，但是由于页面是 keep-alive 的，所以只要路由变了（如...
4、【转载】vue中keep-alive缓存组件不生效的坑
lizh的博客
09-10 1227
4、【转载】vue中keep-alive缓存组件不生效的坑 坑出现背景 在维护公司代码时发现里面写watch route不生效，无法监听子路由的table切换。组件不会缓存，但是全局组件已经做过缓存处理。此处每次进入此table页都会触发created周期。花费大半个小时之后终于找到了问题点 坑的原因 keep-alive缓存时include中的名字必须与组件上的名字完全一致，组件没有写名字或者名字不一致就会导致缓存失效，每次进入组件都触发created生命周期 代码如下 全局组件中 &
vue路由监听失效
weixin_39031037的博客
08-26 3512
场景："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 3505
首次监听不到时 可以使用immediate方法，其值是true或false；immediate:true代表如果在wacth里声明了之后，就会立即执行里面的handler方法。this.handleRouteParam() // 处理路由跳转后的页面渲染数据。
vue页面已经跳转，但是watch获取不到$route
OldStreet61的博客
09-03 7331
1、问题描述： 在开发的时候使用 this.$router.push({path:"/test",query:{name:"test"}}) 进行页面跳转， 页面已经跳转至test了，并且路由显示"test?name='test' " （1）watch监听获取 $route(to, from) { console.log(this.$route);//打印空对象，获...
（Vue）页面跳转，但是watch获取不到$route
weixin_44068394的博客
03-23 2454
问题描述：从子组件回退到子组件时 要在父组件执行操作，使用$route作为监听条件 { path: 'sgjd', name: 'home-user-sgjd', component: sgjd, children: [ { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值