vue 路由传参取参

Vue.js 路由参数传递和获取是一个常见的需求，在 Vue Router 中，你可以使用动态路由（也称为参数化的路径）来传递数据。动态路由通常使用冒号 `:` 来定义参数的部分，例如：

// 定义动态路由
const routes = [
  { path: '/users/:userId', component: UserComponent },
]

// 当前路由中，`userId` 就会被匹配为实际的 URL 查询参数或哈希片段参数
router.push('/users/123') // userId 会变为 '123'

// 在组件中获取参数
export default {
  computed: {
    userId () {
      return this.$route.params.userId
    }
  }
}

在这个例子中，`$route` 对象包含所有关于当前路由的信息，包括参数。你可以直接访问 `params` 属性来获取动态参数。

如果你想传递额外的数据，还可以将参数放在查询字符串 `?key=value` 或者使用哈希片段 `#state`（适用于 history API 配置），如：

- 带查询参数的方式：

router.push('/users/123?key=value')
this.$route.query.key // 获取值为 'value'

- 带哈希片段的方式：

router.push({ name: 'yourRouteName', params: { userId: 123 }, query: { key: 'value' } })
this.$route.hash.state // 如果你的 route 配置了 state，则可以获取哈希中的状态对象

记住，`$route` 对象在组件销毁后不会保留数据，如果你需要长期存储某些信息，可能需要使用 `$route.meta` 或 Vuex 状态管理。