如何解决vue-router中钩子函数data依赖于异步数据的问题

如何解决vue-router中钩子函数data依赖于异步数据的问题

localhost:8080/xname/localhost:8080/xname/xname.vue只created一次
怎样才能让1和2页面显示的数据不一样呢，
尝试了下watch $route，我的xname.vue代码如下：
created(){
this.fetchdata()
},
watch:{
$route:fetchdata
},
methods:{
fetchdata(){
console.log("created")
}
}

但是这种方式会存在下面的问题页面进入的时候执行了一次fetchdata，页面离开的时候又执行了一次fetchdata，每次进入页面都得刷新数据，没有缓存