【Vue代码分析】前端动态路由传参与可选参数标记：实现“添加/查看”模式的灵活路由配置
代码：
一、引言
在Vue等前端框架中，路由是页面跳转的核心机制。动态路由允许路径包含可变参数，而可选参数标记（?）则让路由更灵活——例如“员工详情页”需同时支持“添加新员工”和“查看已有员工”两种模式，通过可选参数即可用同一路由区分不同场景，减少路由冗余，提升代码复用性。
二、动态路由与可选参数基础
1. 动态路由（:param）
定义：路由路径中使用 :param 标记可变部分，用于捕获用户访问时的具体值（如用户ID、商品ID等）。
作用：让同一路由匹配不同参数，实现“同一组件处理不同数据”的逻辑（如查看不同员工的详情）。
path: '/user/:id' // 访问 /user/123 时，id 为 '123'
2. 可选参数（:param?）
定义：在动态参数后添加 ?（如 :id?），表示该参数可省略（即访问时可以不传参数），参数可能为 undefined 或具体值。。
作用：通过同一路由区分“无参数”（如添加新员工）和“有参数”（如查看已有员工）两种模式，减少路由冗余。
path: '/user/:id?' // 访问 /user 时，id 为 undefined；访问 /user/123 时，id 为 '123'
三、路由配置示例（以Vue Router为例）
从 employee.js 的路由配置中，可看到可选参数的实际应用：
{
path: '/employee/detail/:id?', // :id? 表示 id 是可选参数
component: () => import('@/views/employee/detail.vue'),
hidden: true, // 隐藏左侧菜单（非核心逻辑，可忽略）
meta: {
title: '员工详情'
}
}- 当访问
/employee/detail时，id未传递（添加模式）； - 当访问
/employee/detail/123时，id为'123'（查看模式）。
四、组件中传参与路由跳转
在 index.vue 中，通过 $router.push() 实现两种模式的跳转：
1. 添加员工（无参数）
添加员工 点击后跳转到 /employee/detail，id 为 undefined。
2. 查看员工（带参数）
查看 点击后跳转到 /employee/detail/123（假设 row.id 为 123），id 为具体值。
五、应用场景：统一路由实现多模式
通过可选参数，将“添加”和“查看”功能合并到同一路由，优势包括：
- 减少路由数量，简化路由配置；
- 复用同一组件（
detail.vue），降低代码冗余； - 路径语义清晰（
/employee/detail表示添加，/employee/detail/:id表示查看）。
六、注意事项
- 参数验证：可选参数可能为
undefined，需在组件中处理边界情况（如判断id是否存在）。 - 路由守卫：若需权限控制，可在路由守卫中根据
id判断是否允许访问（如查看模式需验证员工是否存在）。 - 路径别名：若需简化路径，可通过
alias设置别名（如alias: '/add-employee'对应/employee/detail）。
