vue 如何实现多个路由共用同一个页面组件

当多个路由公用同一个组件时，会进行组件复用，只会更新数据而不会重新挂载组件实例。

那么它会触发哪几个钩子函数呢？

本次案例为：路由地址1：/pointsShare/track；路由地址2：/pointsShare/share；当切换路由时，共用一个组件，但是要获取不同的数据，我的做法如下：

watch(
  // 当路由更改时初始化不同的参数
  () => route.name,
  (newVal) => {
    trackType.value = newVal == 'share' ? 'SHARE' : 'TRACE';//路由变化时赋值
    queryParams.value.trackType = trackType.value;//赋值
    form.value.trackType = trackType.value;//赋值
    console.log('路由发生变化了');
  },
  { immediate: true },
);
onMounted(() => {
  console.log('我是onMounted');
});
onBeforeUpdate(() => {
  console.log('我是onBeforeUpdate');
});
onUpdated(() => {
  console.log('我是onUpdated');
});

我们可以看出，当切换路由时，由于组件复用，mounted之前的钩子函数都不再复用，因此如果你是在mounted中或者之前获取数据的，数据将不会获取成功，页面也不会更新

解决办法如下：

1、使用路由的onBeforeRouteLeave钩子函数

const getDate=()=>{
  console.log('获取数据');
}
onBeforeRouteLeave((to, from, next) => {
    getDate()//获取数据
  console.log('我是onBeforeRouteLeave，可以在此获取数据');
  next();
});

我们再次切换路由进行打印

我们发现，该钩子函数是会被触发的， 因此你可以选择在路由A离开之前进行获取数据，且当跳转到路由B的时候，数据是存在的，因为复用相同的组件，并没有触发mounted及之前的函数，因此数据就没有重新初始化，但是并不推荐此种方法，因为该钩子函数的作用一般是在离开某页面前来进行一些保存操作等，当操作完成后，再next()

2、使用路由的key属性（常用！）

使用路由的key属性会比较方便，因为key属性就是来解决路由的此类问题的，key属性会强制过渡组件，即会重新触发组件的钩子函数

<keep-alive>
 <component :is="Component" :key="route.path" />
 </keep-alive>

 

 此时我们就可以在钩子函数中获取数据了