企业官网建设流程全解析

在前端开发中，单页面应用（SPA）的页面跳转是家常便饭。但你是否遇到过这样的情况：我们需要跳转到同一个页面组件，但展示的内容却根据不同的 ID 或参数而变化？

例如，在电商系统中，从“商品列表”点击不同的商品，都会跳转到“商品详情页”，但显示的却是当前点击的那个商品的信息。这就是动态路由传参大显身手的地方。

一、 什么是动态路由传参？

动态路由传参，简单来说，就是路由的路径不是固定的，而是包含动态部分的。我们通常在路由路径中使用占位符来标记这部分，Vue Router 会解析 URL 中的这部分内容，并将其作为参数传递给目标组件。

形象点说：

• 普通路由像是：我要去“张三的家”。
• 动态路由像是：我要去“ID 为 101 的住户的家”。这个 101 可能是张三，下次传 102 时就是李四。

二、 它是干什么的？解决了什么问题？

1. 核心作用

它的核心作用是实现复用。它允许我们在服务器端（或后端接口）看来是不同的 URL，但在前端代码中映射到同一个组件实例上。

2. 解决的问题

• 代码冗余：如果没有动态路由，为每一件商品、每一篇文