当前位置：首页 > VUE

vue路由嵌套实现

2026-02-22 00:31:00VUE

路由嵌套的实现方式

在Vue中，路由嵌套通过children属性实现，允许在父路由下定义子路由，形成层级结构。以下是具体实现步骤：

定义嵌套路由配置

在路由配置文件（通常为router/index.js）中，通过children属性定义嵌套路由：

const routes = [
  {
    path: '/parent',
    component: ParentComponent,
    children: [
      {
        path: 'child',
        component: ChildComponent
      },
      {
        path: 'another-child',
        component: AnotherChildComponent
      }
    ]
  }
]

父组件中放置路由出口

父组件模板中需包含<router-view>标签，作为子路由的渲染出口：

<!-- ParentComponent.vue -->
<template>
  <div>
    <h2>父组件</h2>
    <router-view></router-view>
  </div>
</template>

子路由访问路径

嵌套路由的完整路径由父路径和子路径拼接而成：

/parent/child 访问ChildComponent
/parent/another-child 访问AnotherChildComponent

默认子路由设置

可通过redirect或空路径设置默认子路由：

children: [
  {
    path: '',
    component: DefaultChildComponent
  }
]

动态路由嵌套

支持在嵌套路由中使用动态参数：

{
  path: '/user/:id',
  component: UserLayout,
  children: [
    {
      path: 'profile',
      component: UserProfile
    }
  ]
}

命名路由嵌套

可为嵌套路由命名，便于编程式导航：

{
  path: '/settings',
  component: Settings,
  children: [
    {
      path: 'account',
      name: 'settings.account',
      component: AccountSettings
    }
  ]
}

路由守卫应用

嵌套路由支持全局守卫和局部守卫：

vue路由嵌套实现

{
  path: '/admin',
  component: AdminLayout,
  beforeEnter: (to, from, next) => {
    // 父路由守卫逻辑
  },
  children: [
    {
      path: 'dashboard',
      component: AdminDashboard,
      beforeEnter: (to, from, next) => {
        // 子路由专属守卫
      }
    }
  ]
}