路由中的查询参数传参和动态路由参数传参的使用

一、查询参数传参

查询参数传参适用于要传递多个参数的场景。

1.传递参数

//<p @click="$router.push(路由配置的路径?参数名=参数值)">点击传参</p><p @click="$router.push(`/detail?id=${item.id}`)">点击传参</p>

2.接收参数

//this.$route.query.参数名this.$route.query.id

查询参数传参会把参数直接显示在URL地址上

二、 动态路由参数传参

动态路由参数传参适用于传递单个参数，更优雅美观。

1.配置路由路径

// {path:'/路径/:动态参数名',component:ArticleDetail} {path:'/detail/:id',component:ArticleDetail}

2.传递参数

//$router.push(`/路径/传的参数值`)
$router.push(`/detail/${item.id}`)

3.接收参数

//this.$route.params.参数名this.$route.params.id