Vue Router路由传参

1. 基本概念

(1) Query 参数

• 定义：通过 URL 的查询字符串传递参数（如 /target?id=123&name=deviceA）。
• 实现方式：使用 router.push 或 <router-link> 的 query 属性传递键值对对象。

示例：

router.push({path: '/target',query: { id: 123, name: 'deviceA' },
});

(2) Params 参数

• 定义：通过 URL 路径中的动态段传递参数（如 /target/123/deviceA）。
• 实现方式：需要在路由配置中定义动态路径参数，并使用 router.push 或 <router-link> 的 params 属性传递值。

示例：

// 在路由配置中定义动态路径参数
const routes = [{ path: '/target/:id/:name', component: TargetComponent }
];// 使用 params 传值
router.push({ name: 'TargetRouteName', params: { id: 123, name: 'deviceA' } });

---

2. 主要区别

特性	Query 参数	Params 参数
URL 形式	/path?param1=value1&param2=value2	/path/value1/value2
是否显示在 URL 中	是	是
是否刷新页面后仍保留	是	是
是否支持历史记录	是	是
数据类型	字符串（需手动转换其他类型）	字符串（需手动转换其他类型）
适合场景	小量、非敏感数据；易于分享的链接	更复杂的路径结构；更干净的 URL
可选性	可选（可以省略某些参数）	必须提供所有定义的参数

---

3. 优点与缺点

Query 参数

优点：

1. 灵活性高：可以根据需要添加或移除查询参数，不需要预先定义路径。
2. 易于分享：查询参数可以直接复制粘贴分享给他人，方便快捷。
3. 支持动态添加：可以在不改变现有路径的情况下，动态添加新的查询参数。

缺点：

1. URL 看起来较乱：尤其是当有多个查询参数时，URL 可能变得冗长且不易阅读。
2. 不适合敏感信息：因为查询参数会直接显示在 URL 中，不适合用于传递敏感数据（如密码、Token 等）。

Params 参数

优点：

1. URL 更简洁：相比查询参数，路径形式通常看起来更加整洁。
2. 更适合复杂路径结构：对于具有层次结构的数据模型，路径参数可以使 URL 更具语义化。
3. 隐藏部分信息：虽然仍然显示在 URL 中，但相比于查询参数，路径参数可能显得不那么显眼。

缺点：

1. 缺乏灵活性：必须严格按照路由配置的格式传递参数，不能随意增减参数。
2. 难以分享：如果路径参数较多或较复杂，直接分享 URL 可能不如查询参数方便。
3. 路径冲突风险：如果路径设计不合理，可能会导致路径冲突或难以维护。

---

4. 适用场景

Query 参数适用场景：

• 需要根据用户输入或筛选条件动态生成 URL 的场景。
• 数据量较小，且不涉及敏感信息的情况。
• 需要便于分享和书签保存的场景。

Params 参数适用场景：

• 具有固定结构的数据模型，如文章详情页、用户资料页等。
• 希望保持 URL 清洁、易于理解的场景。
• 不需要频繁增减参数的场景。

---

5. 总结

• 选择 Query 参数：当你需要一种灵活、动态的方式传递少量非敏感数据，并希望 URL 易于分享时。
• 选择 Params 参数：当你有一个明确的路径结构，并希望通过 URL 本身传达更多的语义信息时。