Web前端 ---- 【Vue】Vue路由传参（query和params）
在Vue中，使用Vue Router进行路由传参时，可以通过两种方式进行：query 和 params。
query方式：通过URL查询字符串传递参数，参数会显示在URL地址栏中，适用于不敏感的数据传递。
// 定义路由时，使用`:`来定义参数
{
path: '/user/:id',
name: 'user',
component: User
}
// 跳转时，通过`query`传递参数
this.$router.push({ path: '/user', query: { id: 123 }})
// 在目标组件中接收参数
this.$route.query.idparams方式：通过路由的params传递参数，参数不会显示在URL地址栏中，适用于敏感数据传递。
// 定义路由时，使用`:`来定义参数
{
name: 'user',
path: '/user/:id',
component: User
}
// 跳转时，通过`params`传递参数，注意：使用`name`跳转
this.$router.push({ name: 'user', params: { id: 123 }})
// 在目标组件中接收参数
this.$route.params.id注意：使用params方式时，如果直接通过path跳转，则类似于使用query；必须通过name属性跳转，并保证路径中定义了参数。
评论已关闭