简述vue-router 组件复用导致路由参数失效怎么办？

dlovel — Wed, 20 Mar 2024 00:29:00 +0000

当使用 Vue Router 中的组件复用功能时，有时会导致路由参数失效的情况。这是因为 Vue Router 默认情况下会复用相同组件实例，而不会重新创建新的实例，导致路由参数没有更新。解决这个问题可以通过以下几种方式：

watch $route 变化：在需要复用的组件中，可以通过监听 $route 对象的变化来手动更新组件内部的数据。当路由参数发生变化时，可以在 watch 中监听到，并进行相应的处理。

watch: {
  $route(to, from) {
    // 根据新的路由参数 to.params 更新组件数据
  }
}

使用 beforeRouteUpdate 导航守卫：Vue Router 提供了 beforeRouteUpdate 导航守卫，可以在路由参数发生变化时捕获这一变化并执行相应的逻辑。

beforeRouteUpdate (to, from, next) {
  // 根据新的路由参数 to.params 更新组件数据
  next();
}

通过 key 属性强制组件重新渲染：在路由视图组件中，可以通过给组件添加 key 属性，并设置为路由参数的某个值，来强制使组件重新渲染，从而更新路由参数。

通过以上方法，我们可以有效地解决组件复用导致路由参数失效的问题，确保在路由参数发生变化时能够正确地更新组件内容。

复用导致路由参数失效 – 蓝色星空岛