我在我的“容器”组件中使用VueJS的mounted
钩子来获取构建视图的数据。当该容器被销毁时,我使用beforeDestroy
和destroyed
生命周期钩子来“清理”该组件。
当路线更改为相同路线但具有不同参数时,这三个挂钩不被调用。建议的处理方法是通过在$route
中监听watch
更改,如下所示:
watch: {
'$route' (to, from) {
this.id = to.params.id
this.getPageData()
}
}
但是,我没有从mounted
,beforeDestroy
和destroyed
复制逻辑,而是希望做到这样的事情:
watch: {
'$route' (to, from) {
// Manually run lifecycle clean-up hooks
this.beforeDestroy()
this.destroyed()
// Update Id, and run mounted
this.id = to.params.id
this.mounted()
}
}
不幸的是,看起来钩子没有暴露在$vm
上。有没有办法实现这一点,我不知道?我错过了一些明显的东西吗或者有更好的/首选的方法吗?
答案 0 :(得分:2)
您可以将每个生命周期钩子中的代码提取到组件方法中,然后在两个位置调用该方法。这是一个例子:
mounted: function() {
this.__mounted();
},
methods: {
__mounted() {
//mounted code here
}
},
watch: {
'$route' (to, from) {
this.__mounted();
}
}