首页 > 编程知识 正文

路由传参有什么用,props传值类型

时间:2023-05-03 22:18:37 阅读:241785 作者:2560

一直理不清楚路由传参的几种方式,今天总结记录下

第一种方法通过params与配置路由格式(特点:刷新数据不会丢失,会以/user/1234格式拼接显示在url里面)

路由配置

{ path: '/user/:id', name: 'user', component: user }

带参数传递

//直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: '/user/123', })

获取对应参数

this.$route.params.id 第二种方法通过路由属性中的name来确定匹配的路由,通过params来传递参数(特点:刷新会丢失参数,但不会显示在url里面)

路由配置

{ path: '/user', name: 'user', component: user }

带参数传递

this.$router.push({ name: 'user', params: { id: id } })

获取对应参数

this.$route.params.id 第三种方式使用path来匹配路由,然后通过query来传递参数(特点:刷新不会丢失数据,但是参数会以?id:123的格式拼接显示在url里面)

路由配置

{ path: '/user', name: 'user', component: user }

带参数传递

this.$router.push({ path: '/user', query: { id: id } })

获取对应参数

this.$route.query.id 组件的主要功能就是可以复用,但是一旦使用了$route获取路由参数,该组件就会与路由参数具有高耦合性,不便于组件的复用。为了解耦,我们可以使用props来接受路由传参,也可以自定义的让父组件进行出传参。(经过测试这个方法只适合使用params能接收到的路由参数,也就是上文中的第一,二种方法)

在组件定义props来接收参数或者用于父组件传参

props: {id: {type: String, default: '' }}

接收参数

//可以使用以前的方法获取参数this.$route.params.id//但是更推荐直接使用propsthis.id

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。