如何导航至仅URL参数不同的页面？子组件兄弟页跳转方案

这个问题其实是Vue Router的默认行为导致的——当路由的主路径不变，仅参数变化时，Vue会复用现有的子组件实例，而不是销毁后重新创建，所以组件的mounted、created这类生命周期钩子不会再次触发，看起来就像组件没重新渲染。

下面给你几种常用的解决方案，你可以根据自己的场景选择：

1. 监听路由参数变化 #

在子组件里通过watch监听$route对象的变化，当参数更新时手动触发数据更新逻辑：

<script>
export default {
  data() {
    return {
      itemData: null
    };
  },
  watch: {
    // 监听路由变化
    '$route'(to, from) {
      // 路由参数变化时，重新获取对应的数据
      this.loadItemData(to.params.id);
    }
  },
  methods: {
    async loadItemData(id) {
      // 这里替换成你的实际数据请求逻辑
      const response = await fetch(`/api/items/${id}`);
      this.itemData = await response.json();
    }
  },
  // 组件首次挂载时加载数据
  mounted() {
    this.loadItemData(this.$route.params.id);
  }
};
</script>

2. 给<router-view>添加唯一key #

在父组件的<router-view>上绑定key为$route.fullPath，这样只要路由（包括参数）有变化，Vue就会认为这是一个新的组件实例，从而重新渲染：

<!-- 父组件中的router-view -->
<router-view :key="$route.fullPath"></router-view>

这个方法最简单直接，但要注意：组件会被完全销毁再重建，所有生命周期钩子都会重新执行，如果组件有比较重的初始化逻辑，可能会有轻微的性能影响，但大多数业务场景下完全可以接受。

3. 使用beforeRouteUpdate导航守卫 #

这是Vue Router提供的专门用于组件复用时的路由守卫，在路由更新但组件实例被复用的时候触发：

<script>
export default {
  data() {
    return {
      itemData: null
    };
  },
  // 路由更新前触发
  beforeRouteUpdate(to, from, next) {
    // 先更新数据，再允许路由跳转完成
    this.loadItemData(to.params.id).then(() => {
      next();
    });
  },
  methods: {
    async loadItemData(id) {
      const response = await fetch(`/api/items/${id}`);
      this.itemData = await response.json();
    }
  },
  mounted() {
    this.loadItemData(this.$route.params.id);
  }
};
</script>

这个方法适合需要在路由更新前做一些预处理（比如数据加载完成后再更新视图）的场景。

总结一下：如果只是想要简单让组件重新渲染，选方案2；如果需要更精细地控制数据更新时机，选方案1或3。

内容的提问来源于stack exchange，提问作者JennyToy