vue多个路由公用一个组件

标签：out   不同的   efi   方法   creat   app   view   turn   组件   

在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);
 }
}

vue多个路由公用一个组件

标签：out   不同的   efi   方法   creat   app   view   turn   组件   

原文地址：https://www.cnblogs.com/wangstudyblog/p/14719318.html