代码：
一、引言
在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 表示查看）。
