✨ Vue.js 动态路由详解

动态路由是 Vue Router 的核心特性之一,允许根据参数变化动态加载组件。以下是关键知识点:

路由参数匹配 使用 :paramName 标记定义动态段,例如:

{
  path: '/user/:id',
  component: User
}

当访问 /user/123 时,$route.params.id 会自动获取参数值

嵌套路由配置 通过 children 属性实现嵌套结构:

{
  path: '/community',
  component: CommunityLayout,
  children: [
    { path: 'vuejs', component: VuejsPage },
    { path: 'dynamic_routes', component: DynamicRoutesPage }
  ]
}

动态路由重定向 可设置路由跳转规则:

{
  path: '/community/:id',
  redirect: '/community/vuejs_dynamic_routes'
}

📌 深入学习可访问 Vue Router 官方文档 查看完整 API

Vue_Router