代码：
一、引言
在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. 添加员工（无参数）
<el-button @click="$router.push('/employee/detail')">添加员工</el-button>点击后跳转到/employee/detail，id为undefined。
2. 查看员工（带参数）
<el-button @click="$router.push(`/employee/detail/${row.id}`)">查看</el-button>点击后跳转到/employee/detail/123（假设row.id为123），id为具体值。
五、应用场景：统一路由实现多模式
通过可选参数，将“添加”和“查看”功能合并到同一路由，优势包括：
- 减少路由数量，简化路由配置；
- 复用同一组件（
detail.vue），降低代码冗余； - 路径语义清晰（
/employee/detail表示添加，/employee/detail/:id表示查看）。
六、注意事项
- 参数验证：可选参数可能为
undefined，需在组件中处理边界情况（如判断id是否存在）。 - 路由守卫：若需权限控制，可在路由守卫中根据
id判断是否允许访问（如查看模式需验证员工是否存在）。 - 路径别名：若需简化路径，可通过
alias设置别名（如alias: '/add-employee'对应/employee/detail）。
