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

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 可得到：

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

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

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