当前位置：首页 > VUE

vue多级路由怎么实现

2026-02-22 22:25:14VUE

实现多级路由的基本配置

在Vue Router中，多级路由通过嵌套的children属性实现。每个路由配置对象可以包含children数组，用于定义子路由。子路由的路径会基于父路由的路径进行拼接。

const routes = [
  {
    path: '/parent',
    component: ParentComponent,
    children: [
      {
        path: 'child',
        component: ChildComponent,
        children: [
          {
            path: 'grandchild',
            component: GrandchildComponent
          }
        ]
      }
    ]
  }
]

路由视图的嵌套

父级组件中需要使用<router-view>作为子路由的出口。例如在ParentComponent中：

<template>
  <div>
    <h2>Parent Component</h2>
    <router-view></router-view>
  </div>
</template>

动态路由参数传递

多级路由支持动态参数传递，参数会继承到子路由：

vue多级路由怎么实现

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

命名路由的使用

为多级路由设置名称可以简化导航：

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

路由懒加载优化

使用动态导入实现路由组件的懒加载，提升应用性能：

vue多级路由怎么实现

{
  path: '/admin',
  component: () => import('./Admin.vue'),
  children: [
    {
      path: 'dashboard',
      component: () => import('./AdminDashboard.vue')
    }
  ]
}

路由守卫的应用

可以为多级路由配置全局或局部守卫：

{
  path: '/protected',
  component: ProtectedLayout,
  meta: { requiresAuth: true },
  children: [
    {
      path: 'dashboard',
      component: Dashboard
    }
  ]
}

路由重定向配置

在多级路由中设置重定向：

{
  path: '/products',
  component: Products,
  children: [
    {
      path: '',
      redirect: 'list'
    },
    {
      path: 'list',
      component: ProductList
    }
  ]
}