Vue中路由传值的三种通俗讲解_params_它就像一个指向具体信息的路标

Vue中路由传值的三种方法，通俗讲解

一、路由参数（params）传值

就像你在网上买东西，点击一个链接看到某个商品的详细信息页，这个信息页的链接里就包含了这个商品的ID，这就是路由参数。它就像一个指向具体信息的路标。

定义路由路径：
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: UserDetail }
  ]
})

传递参数：

在需要跳转的地方使用或编程式导航传递参数：
this.$router.push({ name: 'user', params: { id: 123 } })

接收参数：

在目标组件中，通过获取参数：
this.$route.params.id

二、查询参数（query）传值

查询参数就像你在网上搜索商品，商品后面的那一串东西，它不改变链接的结构，只是提供了一些额外的信息。

传递查询参数：

在需要跳转的地方使用或编程式导航传递查询参数：
this.$router.push({ query: { userId: 123 } })

接收查询参数：

在目标组件中，通过获取参数：
this.$route.query.userId

三、通过props传值

通过props传值就像你在网上下单，订单信息里包含了商品信息、数量、价格等，这些信息直接传递给了商家。

在路由配置中启用props：

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: UserDetail, props: true }
  ]
})

接收props：

在目标组件中，通过props接收参数：
props: ['userId']

四、总结与建议

选择合适的传值方式，让代码更清晰、高效。

根据实际需求选择合适的传值方式，保持代码的一致性和可维护性。