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()将不会再被调用。