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

Vue-router 的组件复用机制，即当路由参数变化时，如果路由对应的组件是复用的，那么 Vue 不会重新创建组件实例，而是会复用已存在的组件实例。这种情况下，如果你的组件内部依赖了路由参数，那么可能会出现路由参数失效的问题。

一种常见的解决方法是在 beforeRouteUpdate 钩子函数中处理路由参数的变化。beforeRouteUpdate 钩子函数在组件实例被复用时调用，可以在这个钩子函数中获取新的路由参数，并更新组件的状态。

以下是一个示例：

export default {
  data() {
    return {
      // 假设我们要获取的参数是 id
      id: null,
    };
  },
  beforeRouteUpdate(to, from, next) {
    // 当路由参数变化时，更新 id
    this.id = to.params.id;
    next();
  },
  watch: {
    // 监听 id 的变化，当 id 变化时更新组件
    id(newVal) {
      // 根据新的 id 获取数据，并更新组件
      this.fetchData(newVal);
    },
  },
  methods: {
    fetchData(id) {
      // 根据 id 获取数据，并更新组件
      // ...
    },
  },
};

在上面的示例中，beforeRouteUpdate 钩子函数会在路由参数变化时被调用，然后我们可以在这个钩子函数中获取新的路由参数，并更新组件的状态。同时，我们还使用 Vue 的 watch 选项来监听 id 的变化，当 id 变化时，我们会重新获取数据，并更新组件。

另外，你也可以使用 key 属性来强制 Vue 重新创建组件实例。你可以将 key 属性绑定到路由参数，这样当路由参数变化时，key 也会变化，Vue 就会重新创建组件实例。

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

但是需要注意的是，强制重新创建组件实例可能会导致性能问题，因此在使用时需要谨慎考虑。