vue实现带参数跳转

路由配置

在Vue项目中，使用Vue Router进行路由跳转时，需要在router/index.js中配置动态路由参数。例如，定义一个接收id参数的路由：

{
  path: '/detail/:id',
  name: 'Detail',
  component: DetailComponent
}

编程式导航传递参数

通过this.$router.push方法跳转时，可以通过对象形式传递参数：

// 传递params参数
this.$router.push({ name: 'Detail', params: { id: 123 } })

// 传递query参数
this.$router.push({ path: '/detail', query: { id: 123 } })

模板中直接跳转

在模板中使用<router-link>实现带参数跳转：

<!-- params传参 -->
<router-link :to="{ name: 'Detail', params: { id: item.id } }">
  查看详情
</router-link>

<!-- query传参 -->
<router-link :to="{ path: '/detail', query: { id: item.id } }">
  查看详情
</router-link>

接收路由参数

在目标组件中，通过this.$route获取传递的参数：

// 接收params参数
const id = this.$route.params.id

// 接收query参数
const id = this.$route.query.id

注意事项

使用params传参时，必须通过命名路由（name）跳转，不能使用path。刷新页面后params参数会丢失，而query参数会保留在URL中。

对于需要持久化的参数，建议使用query或Vuex状态管理。