vue router 传参

// Vue Router 传参示例

// 1. 定义路由时使用动态路径参数 (path params)
const routes = [
  {
    path: '/user/:id', // :id 是动态参数
    component: User
  }
]

// 2. 在组件中获取动态路径参数
<template>
  <div>
    用户ID: {{ $route.params.id }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      userId: this.$route.params.id
    }
  },
  watch: {
    '$route' (to, from) {
      // 当路由变化时，更新用户ID
      this.userId = to.params.id
    }
  }
}
</script>

// 3. 使用 query 参数传参
this.$router.push({ path: '/user', query: { id: 123 }})

// 4. 在组件中获取 query 参数
<template>
  <div>
    用户ID: {{ $route.query.id }}
  </div>
</template>

// 5. 使用命名路由和 params 传参
this.$router.push({ name: 'user', params: { id: 123 }})

// 6. 在组件中获取命名路由的 params 参数
<template>
  <div>
    用户ID: {{ $route.params.id }}
  </div>
</template>

解释说明：

1. 动态路径参数：通过在路由定义中使用 :paramName 来定义动态参数。可以在组件中通过 $route.params.paramName 获取该参数。
2. 监听路由变化：当路由参数变化时，可以通过 watch 监听 $route 的变化来更新组件中的数据。
3. Query 参数：通过 query 方式传参，类似于 URL 中的查询字符串，可以在组件中通过 $route.query.paramName 获取。
4. 命名路由：通过命名路由和 params 传参，可以更清晰地管理路由跳转，并且在组件中通过 $route.params.paramName 获取参数。

以上是 Vue Router 常见的几种传参方式及其使用方法。