路由配置属性一、路由配置的核心作用定义导航规则：通过配置对象描述URL与页面/组件的映射关系。控制路由行为：设置参数

一、路由配置的核心作用

定义导航规则：通过配置对象描述URL与页面/组件的映射关系。
控制路由行为：设置参数解析、守卫逻辑、渲染策略等高级功能。
框架集成基础：在React/Vue等框架中，路由配置是SPA导航的核心数据源。

二、主流框架路由配置属性对比

1. Vue Router（Vue框架）

基础配置示例：

const routes = [
  {
    path: '/user/:id',        // 路由路径（支持动态参数）
    name: 'User',             // 路由名称（可用于命名导航）
    component: UserComponent, // 渲染组件
    meta: { requiresAuth: true }, // 自定义元数据（如权限标识）
    children: [                // 嵌套路由
      { path: 'profile', component: ProfileComponent }
    ],
    beforeEnter: (to, from, next) => { /* 路由守卫 */ }
  }
]

核心属性解析：
- path：路由路径，支持动态参数（如:id）和通配符（*）。
- component：路由对应的组件（可通过() => import()实现懒加载）。
- meta：存储自定义数据（如权限、页面标题），常用于守卫逻辑。
- children：定义嵌套路由（需父组件包含<router-view>）。
- redirect：路由重定向（如redirect: '/home'）。

2. React Router（React框架）

基础配置示例（v6版本）：

<Routes>
  <Route path="/user/:id" 
         element={<UserComponent />}
         loader={fetchUserData}    // 数据加载函数
         action={updateUser}      // 表单提交处理
         meta={{ requiresAuth: true }}>
    <Route path="profile" element={<ProfileComponent />} />
  </Route>
</Routes>

核心属性解析：
- path：路由路径（动态参数用:，如:id）。
- element：渲染的React组件（支持JSX直接声明）。
- loader：路由加载时预获取数据（配合Server Components）。
- action：处理表单提交等操作（替代传统的API请求）。
- children：嵌套路由（通过<Route>嵌套声明）。

3. Angular Router（Angular框架）

基础配置示例：

const routes: Routes = [
  {
    path: 'user/:id',
    component: UserComponent,
    canActivate: [AuthGuard],      // 激活守卫
    resolve: { user: UserResolver }, // 数据解析守卫
    children: [
      { path: 'profile', component: ProfileComponent }
    ]
  }
];

核心属性解析：
- path：路由路径（动态参数用:，通配符用**）。
- component：目标组件（需在NgModule中声明）。
- canActivate：路由激活前的守卫（用于权限验证）。
- resolve：解析守卫（在组件渲染前获取数据）。
- data：自定义数据（如data: { title: '用户页' }）。

三、跨框架通用配置属性

1. 路径配置（Path Configuration）

动态参数：
- 格式：/user/:id（Vue/Angular）、/user/:id（React Router）。
- 解析：通过this.$route.params.id（Vue）或useParams()（React）获取。
通配符路由：
- 用途：匹配不存在的路由（如path: '*'），常用于404页面。
- 注意：通配符路由需放在配置最后，避免优先级冲突。

2. 组件与渲染（Component & Rendering）

懒加载组件：
- Vue示例：component: () => import('./UserComponent.vue')
- React示例：element={<React.lazy(() => import('./UserComponent')) />}
- 作用：减少首屏加载时间，实现按需加载。
嵌套路由渲染：
- 父组件需包含<router-view>（Vue）或<Outlet>（React）来显示子路由组件。

3. 路由守卫与拦截（Guards & Interceptors）

前置守卫（Before Navigation）：
- 场景：登录验证、权限控制（如meta.requiresAuth）。
- 实现：
  - Vue：beforeEnter（路由级）、beforeEach（全局）。
  - React：通过useNavigate和useLocation在组件中拦截。

解析守卫（Data Resolvers）：

作用：在路由激活前获取数据（如用户信息、文章详情）。

示例（Vue）：

{
  path: '/article/:id',
  component: ArticleComponent,
  resolve: {
    article: (to) => fetchArticle(to.params.id)
  }
}

4. 重定向与别名（Redirect & Alias）

重定向：
- 格式：redirect: '/new-path'（Vue）、<Redirect to="/new-path" />（React旧版本）。
- 用途：将旧路由映射到新路由（如版本升级时兼容旧URL）。
别名：
- 示例（Vue）：alias: '/profile'使/user/:id和/profile/:id指向同一组件。
- 作用：为路由提供多个URL访问方式，提升SEO或用户体验。

四、配置属性的工程化实践

1. 动态路由配置：

场景：根据用户角色动态生成路由（如管理员可见更多菜单）。

实现（Vue示例）：

// 后端返回路由配置
const dynamicRoutes = [
  { path: '/admin', component: AdminPanel, meta: { role: 'admin' } }
];
// 动态添加到路由表
dynamicRoutes.forEach(route => router.addRoute(route));

2. 路由参数验证：

用途：确保动态参数合法（如:id必须为数字）。

React Router v6示例：

<Route 
  path="/user/:id" 
  element={<UserComponent />}
  validate={(params) => !isNaN(Number(params.id))}
/>

3. 路由元数据与页面标题：

示例（Vue）：

{
  path: '/about',
  component: AboutComponent,
  meta: { title: '关于我们' }
}

在全局守卫中更新页面标题：

router.beforeEach((to) => {
  document.title = to.meta.title || '默认标题';
});