watch '$route'(to,from)无效 解决方法

2 篇文章 0 订阅

watch ‘$route’(to,from)无效

组件代码:

watch:{
     '$route' (to, from) {
         // 对路由变化作出响应...
         console.log(to)
     }
},

路由配置:

{
    path:'/user/:id',
    name:'User',
    component:() => import ('../views/User'),
    children:[

    ]
 },

user 组件我让其成为异步组件,是想实现点击用户头像再跳转路由进入 /user,从路由参数中获取user id发起ajax请求获取用户信息

可最终得到的结果是:在user组件中使用watch 监听路由的变化无效(我想在监听中取出参数)

注意:不管你的组件是不是异步组件,也会有此问题

原因:

路由组件的渲染区域为 router-view,作为顶层出口(官方是这么叫的)它将匹配到的路由组件渲染在该区域中,路由组件渲染默认的方式是销毁 - 创建,在组件中加入生命周期函数可以证明:

created(){
    console.log("user 组件被创建")
}

你可以使用浏览器的前进后退来跳转页面,也可以通过点击你设置的页面元素来进行路由跳转

解决方案:

正是因为组件被路由渲染出来的方式是销毁 - 创建,那么组件实例中定义的一系列方法每创建一次组件new Vue(),方法都是新添加上去的,自然 $watch这个操作就监听不到路由的变化,更不用说定义在组件中的beforeRouteUpdate这种方法,所以,要想实现这个功能得让组件成为 复用组件,只需加keep-alive即可

<keep-alive>
    <router-view></router-view>
</keep-alive>

此后,你的 watch '$route' 将在路由改变的时候起作用!!!加上了keep-alive后你可以测试到在第一次跳转路由后你定义的生命周期函数 created()将不会再被调用。

闲言碎语:

顺带提一句:出自图灵丛书 深入浅出 Vue.js

在Vue.js 的整个生命周期中,初始化实例属性是第一步,那么我所要用到的 $watch这个东西在组件开发中写作watch,这种东西在vue 中叫做 实例方法。查API 可得到:

在这里插入图片描述

并且以 $开头的属性是提供给用户使用的外部属性,以 _ 开头的是提供给内部使用的内部属性

既然 生命周期中,初始化实例属性是第一步,那初始化初始化实例方法自然在后头,所以会有点问题!

该书我并没有看完,完全是根据我所遇到的问题各处查了下资料,属于断章取义,如有错误,望指出,谢谢

  • 4
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值