在路由中使用可选参数：如何实现同一路由适配无参、带参两种场景？

通过配置路由可选参数实现路由复用是完全可行的，该能力是Vue Router、React Router等主流前端路由库的原生支持特性，不需要做额外的复杂封装，即可覆盖你提到的两类使用场景。

基础路由规则配置 #

配置的核心是在路由路径声明时，将需要动态传入的参数段标记为可选状态，让路由匹配器在检测到参数段缺失时，依然能命中对应的路由组件实现复用：

• 声明规则时，在动态参数后缀追加?标识代表参数可选，例如要实现用户列表和指定用户详情的路由复用，可将路由路径配置为/user/:userId?
• 配置顺序需要注意优先级：同路径下的静态路由规则（例如/user/setting这类固定路径）要放在带可选动态参数的规则之前，避免静态路径被动态参数规则误捕获，导致路由匹配异常。

按照这个规则配置完成后，两类访问路径都会命中同一个路由组件：

• 访问无参路径/user时，路由参数中的userId值为undefined
• 访问带参路径/user/123时，路由参数中的userId值为"123"

业务逻辑适配 #

• 无参访问场景：在路由组件内部，通过路由框架提供的参数读取接口统一获取参数值，检测到参数为undefined时，直接执行默认业务逻辑即可——比如加载全量列表数据、展示通用页面内容，不需要添加额外的路由拦截或强制跳转逻辑。
• 带参访问场景：访问携带参数的路径时，路由会直接复用已加载的同一个组件，不会产生组件销毁重建的性能开销。此时组件内部检测到参数存在时，直接根据参数值拉取对应业务数据、渲染对应内容即可。

1. 注意区分可选路径参数和查询参数：可选路径参数会直接体现在URL路径结构中，如果你的参数不需要暴露在路径上，直接用查询参数（例如/user?id=123）实现可选逻辑会更轻量化，不需要调整原有路由的路径规则。
2. 路由复用时要做好参数监听：同一个路由组件在不同参数的路径之间切换时，不会重新触发组件挂载的生命周期钩子，需要手动监听路由参数的变更事件、触发对应业务逻辑更新，否则会出现参数已变化但页面内容不刷新的问题。

内容的提问来源于stack exchange，提问作者Jounior Developer