Vue Router 是 Vue.js 应用中的官方路由库，它允许我们定义和管理应用的路由，实现页面间的平滑切换。动态路由是 Vue Router 的一个重要特性，允许我们在路由中使用动态参数，以便根据不同的参数值展示不同的内容。在某些场景下，我们可能需要使这些动态参数变为可选的，即用户可以选择传递或不传递这些参数。
问题在于，默认情况下，Vue Router 中的动态参数（如 `:page` 和 `:id`）被视为必填项。如果在路径中省略了这些参数，Vue Router 将不会匹配到相应的路由，而可能会重定向到默认或错误页面。例如，在以下配置中：
```javascript
new Router({
routes: [
{
path: '/user/:page/:id',
name: 'User',
component: () => import('pages/user')
},
{
path: '*',
redirect: '/home'
}
]
})
```
当用户访问 `/user` 或 `/user/1` 时，由于 `:page` 和 `:id` 参数缺失，系统会将路径视为无效，并重定向至 `/home` 页面。
为了解决这个问题，我们可以将动态参数标记为可选。Vue Router 中，我们可以在动态段后面添加一个问号 (`?`) 来表示该参数是可选的：
```javascript
path: '/user/:page?/:id?'
```
这样，即使没有提供 `page` 和 `id` 参数，Vue Router 也会尝试匹配这个路由，从而实现预期的效果。
除了静态地定义路由，Vue Router 还支持动态添加路由，这对于权限管理尤其有用。例如，用户登录后，服务器可能返回具有特定权限的菜单列表。前端可以根据这些信息动态地添加对应的路由。Vue Router 提供了 `addRoutes` 方法来实现这一点：
```javascript
// 假设我们已经获取了服务器返回的权限菜单
const permissionRoutes = [...];
// 将新的路由添加到现有的路由数组中
this.$router.options.routes.push(...permissionRoutes);
// 使用 addRoutes 添加新路由
this.$router.addRoutes(this.$router.options.routes);
```
这样，我们可以在运行时扩展路由表，确保用户只能访问他们被授权的页面。
总结一下，Vue Router 中动态路由的参数可以通过在动态段后面添加问号来设置为可选。同时，Vue Router 提供的 `addRoutes` 方法允许我们根据需要动态地添加路由，这对于实现基于用户权限的动态菜单和路由管理非常有用。在实际开发中，合理利用这些特性能够提高应用的灵活性和安全性。
- 1
- 2
前往页