Vue Router: 使用参数跳转到详情页

使用参数跳转到详情页

在 Vue Router 中，可以使用参数来传递数据到目标路由页面。以下代码演示了如何使用参数 id 跳转到 detail 路由页面：

// 原代码
id && this.$router.push({ name: 'detail', params: { id }})
!id && this.$router.push({ name: 'detail' })

// 简化代码
this.$router.push({ name: 'detail', params: { id } || undefined })

解释:

• id 是传递给 detail 页面的参数，用于区分不同的详情页面。
• 如果 id 存在，则使用 params: { id } 传递参数。
• 如果 id 不存在，则使用 undefined 作为参数值。

简化后的代码利用了 JavaScript 的短路运算符 ||，如果 id 存在，则使用 id 作为参数值，否则使用 undefined。这样可以减少代码量，提高代码可读性。