vue2兄弟路由之间如何传参

在Vue 2中，可以通过使用路由参数来在兄弟路由之间传递参数。下面是一种常见的方法：

1. 在父路由中使用 `router.push()` 方法来传递参数，并在目标路由中获取参数。

// 父路由
<router-link to="/child">显示子路由</router-link>

// 子路由
<template>
  <div>
    <router-link to="/sibling?param=value">显示兄弟路由</router-link>
    <!-- 在兄弟路由中获取参数 -->
    {{ param }}
  </div>
</template>

<script>
export default {
  mounted() {
    // 获取参数值
    const param = this.$route.query.param;
    console.log(param); // 输出: value
  }
}
</script>

2. 另一种方法是使用 `router.navigate()` 方法在兄弟路由之间传递参数。可以使用 `query` 属性来设置查询参数，并在目标路由中通过 `this.$route.query` 获取参数值。

// 父路由
<router-link to="/sibling?param=value">显示兄弟路由</router-link>

// 子路由
<template>
  <div>
    <button @click="navigateToSibling">导航到兄弟路由</button>
  </div>
</template>

<script>
export default {
  methods: {
    navigateToSibling() {
      this.$router.navigate("/sibling", { query: { param: "value" } });
    }
  }
}
</script>

在上述示例中，`navigateToSibling` 方法将参数值作为查询参数传递给 `router.navigate()` 方法，并在子路由的兄弟路由中通过 `this.$route.query` 获取参数值。这种方法适用于更复杂的场景，如分页导航或表单验证等。

请注意，上述示例中的代码是基于Vue 2的语法，如果你使用的是Vue 3，语法可能会有所不同。此外，这些方法适用于单个路由之间的参数传递，如果你需要在多个兄弟路由之间传递参数，可能需要考虑其他方法，如使用全局状态管理或使用Vuex等库。