✨ 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