组件代码:
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 可得到:
并且以
$
开头的属性是提供给用户使用的外部属性,以_
开头的是提供给内部使用的内部属性
既然 生命周期中,初始化实例属性是第一步,那初始化初始化实例方法自然在后头,所以会有点问题!
该书我并没有看完,完全是根据我所遇到的问题各处查了下资料,属于断章取义,如有错误,望指出,谢谢