vue 同路由携带不同参数跳转无法刷新问题解决方法

前言

当跳转同一路由，携带不同参数时，组件会被复用，生命周期之前创建了一次，不会再次重新创建，因此页面不会刷新

可以考虑一下几种解决方法：

方法一：使用watch监听路由参数的变化，并在参数变化时手动执行相应的逻辑来实现刷新页面的效果。

watch: {
  $route(to, from) {
    // 在这里根据参数的变化执行刷新页面的逻辑
  }
}

方法二：使用key属性给组件添加唯一标识，当路由参数发生变化时，通过修改key的值来重新渲染组件，从而达到刷新页面的效果。

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

方法三：当一个组件复用时，传递的参数发生变化就会触发这个钩子函数，在路由配置中使用beforeRouteUpdate守卫，该守卫会在当前路由更新时被调用，可以在守卫中执行刷新页面的逻辑

beforeRouteUpdate(to, from, next) {
  // 在这里执行刷新页面的逻辑
  next();
}

方法四：可以考虑使用vuex来管理路由参数，在每次路由跳转时将参数存储到vuex中，在需要刷新页面时，通过修改参数的值来触发刷新。