vue2路由传参方式

科技数码时间：2024-11-14 00:01:50

vue路由传参的几种方式

Vue路由传参主要有以下三种方式：

1. params传参：这种方式需要在路由配置时就定义好参数，参数在路径中显示，例如 /Search/:keyword。在组件中可以通过 this.$route.params 来获取该参数的值。如果参数不在路径上，那么参数为不可见，但刷新页面时，参数会消失。

2. query传参：查询参数可以通过在路由链接中添加查询字符串（?）的方式传递，例如 ?id=1。在组件中可以通过 $route.query.id 来获取该参数的值。

3. props传参：在路由定义中，可以通过 props 属性将路由组件与静态数据关联起来，例如 { path: '/user/:id', component: User, props: { id: 123 } }。在组件中可以直接获取传递的 id 属性，而不需要通过 $route 来获取。

郑重声明：图文由自媒体作者发布，我们尊重原作版权，但因数量庞大无法逐一核实，图片与文字所有方如有疑问可与我们联系，核实后我们将予以删除。