企业官网建设流程全解析

代码：

一、引言

在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表示查看）。

六、注意事项

1. 参数验证：可选参数可能为undefined，需在组件中处理边界情况（如判断id是否存在）。
2. 路由守卫：若需权限控制，可在路由守卫中根据id判断是否允许访问（如查看模式需验证员工是否存在）。
3. 路径别名：若需简化路径，可通过alias设置别名（如alias: '/add-employee'对应/employee/detail）。