vue多个路由公用一个组件

在vue中我们经常会使用/Id/:id 尽管我们改变了id传入了不同的路由,但我们还是使用的同一个view。

当我们多个路由公用一个组件时,钩子函数(created和mounted)只会触发一次,我们如果想要多次触发,有两种方法:

第一种方法:

在app.vue中添加:

<router-view :key="key" />
computed: {
 key() {
 return this.$route.name !== undefined? this.$route.name +new Date(): this.$route +new Date()
 }
}

或者

<router-view :key="$route.fullPath"/>

通过一个唯一的Key保证我们每次都能重新刷新路由

但这样有个缺点:所有的钩子函数都被触发了,如果我们只是想要触发指定的钩子函数怎么办?

第二种方法:

watch: { //通过watch来监听路由变化,每次路由变化都会执行function()
 "$route": function(){
 this.getData(this.$route.params.category);
 }
}