vue 路由跳转传参

Vue路由跳转通常通过动态路径参数(`/:param`)或查询参数(`?key=value`)来传递参数。这里有几种常见的方法：

1. **动态路由参数**:
使用 `router-link` 或 `this.$router.push` 的形式，如 `/<component-name :id="item.id">`。这里的`:id`是一个占位符，当你导航到这个链接时，`id`的值会被自动解析并传递给对应的组件。

// 路由配置
{
  path: '/detail/:itemId',
  component: DetailComponent,
}

// 跳转并传参
this.$router.push({ name: 'detail', params: { itemId: 123 } })

2. **查询参数**:
对于状态无关且不会改变浏览器历史记录的情况，可以使用查询字符串 (`?key=value`)。

// 路由配置
{
  path: '/search',
  query: {
    keyword: '',
  },
  component: SearchComponent,
}

// 跳转并传参
this.$router.push({ path: '/search', query: { keyword: 'Vue' } })

3. **Vuex**:
如果需要在多个地方传递参数并且希望保持状态一致性，可以考虑使用Vuex存储数据，然后在路由守卫里获取这些数据。

// 在store中设置参数
this.$store.commit('setSearchKeyword', 'Vue')

// 守卫获取参数
router.beforeEach((to, from, next) => {
  if (to.meta.requiresSearchKeyword) {
    // 在这里检查是否存在搜索关键词并进行跳转
  }
  next()
})