Vue.js 嵌套路由与命名路由的实战配置-Vue.js-PHP中文网

vue嵌套路由与命名路由需协同使用：嵌套路由依赖父路由children配置、父组件显式router-view及子路径不加斜杠；命名路由通过唯一name解耦跳转，二者结合提升中大型项目可维护性。

vue.js 嵌套路由与命名路由的实战配置

Vue.js 嵌套路由与命名路由不是两个孤立功能，而是配合使用的组合方案：嵌套路由解决“布局复用 + 内容分层”，命名路由解决“路径解耦 + 跳转稳定”。配置得当，能显著提升中大型项目可维护性。

嵌套路由：父子结构必须同步配置

嵌套路由生效依赖三个关键点——缺一不可：

父路由配置中必须包含 children 字段，子路由对象写在该数组内（不能平级声明）；
父组件模板中必须显式写，作为子组件的渲染出口；
子路由的 path 不加开头斜杠（如 'profile' 而非 '/profile'），否则会被解析为根路径，脱离嵌套上下文。

例如用户详情页需展示“资料”“动态”“设置”三块内容，父路由 `/user/:id` 对应 UserView 组件，其 children 配置如下：

```ts
{ path: 'profile', name: 'user-profile', component: () => import('@/views/user/Profile.vue') },
{ path: 'posts', name: 'user-posts', component: () => import('@/views/user/Posts.vue') },
{ path: '', component: () => import('@/views/user/Home.vue') } // 访问 /user/123 时默认显示

命名路由：给每条路由分配唯一 name

命名路由的核心价值在于跳转时不依赖硬编码路径，尤其适合带参数或路径可能调整的场景。name 必须全局唯一，且推荐与路径语义一致。

Wjs Uploading Video

将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。

下载

在路由规则中添加 name 字段，如 { path: '/user/:id/profile', name: 'user-profile', component: Profile }；
模板中使用命名式导航：<router-link :to="{ name: 'user-profile', params: { id: 123 } }">资料</router-link>；
逻辑中跳转也优先用 name：this.$router.push({ name: 'user-posts', params: { id: 123 } })（Vue 2）或 router.push({ name: 'user-posts', params: { id: 123 } })（Vue 3）。

嵌套 + 命名：组合出清晰的路由结构

二者结合后，整个路由树具备明确层级和可读标识。以后台系统为例：

```ts
const routes = [
{
path: '/admin',
component: AdminLayout,
children: [
{ path: '', redirect: 'dashboard' },
{ path: 'dashboard', name: 'admin-dashboard', component: Dashboard },
{
path: 'users',
name: 'admin-users',
component: UsersLayout,
children: [
{ path: '', name: 'admin-users-list', component: UserList },
{ path: ':id', name: 'admin-user-detail', component: UserDetail }
]
}
]
}
]

这样设计后，跳转到用户详情只需 { name: 'admin-user-detail', params: { id: 456 } }，无需关心 URL 是 /admin/users/456 还是未来改成 /admin/staff/456。