当前位置：首页 > VUE

vue多级路由怎么实现

2026-01-22 07:26:04VUE

Vue多级路由的实现方法

在Vue中实现多级路由（嵌套路由）主要通过vue-router的嵌套路由配置完成。以下是具体实现方式：

配置路由文件

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

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

在父组件中添加路由出口

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

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

动态路由匹配

多级路由支持动态参数传递：

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

命名路由

可以为嵌套路由设置名称便于编程式导航：

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

路由守卫

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

{
  path: '/admin',
  component: AdminLayout,
  meta: { requiresAuth: true },
  children: [
    {
      path: 'dashboard',
      component: AdminDashboard,
      beforeEnter: (to, from, next) => {
        // 路由独享守卫逻辑
      }
    }
  ]
}

默认子路由

可以设置默认显示的嵌套路由：

{
  path: '/blog',
  component: BlogLayout,
  children: [
    {
      path: '',
      component: BlogList // 默认子路由
    },
    {
      path: ':id',
      component: BlogPost
    }
  ]
}

路由懒加载

嵌套路由支持懒加载提升性能：

{
  path: '/dashboard',
  component: () => import('./views/Dashboard.vue'),
  children: [
    {
      path: 'analytics',
      component: () => import('./views/Analytics.vue')
    }
  ]
}

完整示例

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: () => import('./views/Home.vue')
    },
    {
      path: '/products',
      component: () => import('./views/Products.vue'),
      children: [
        {
          path: '',
          component: () => import('./views/ProductList.vue')
        },
        {
          path: ':id',
          component: () => import('./views/ProductDetail.vue'),
          children: [
            {
              path: 'reviews',
              component: () => import('./views/ProductReviews.vue')
            }
          ]
        }
      ]
    }
  ]
})

export default router

多级路由的实现关键在于合理规划路由层级结构，并在各级组件中正确放置<router-view>出口。通过嵌套路由可以实现复杂的应用布局和页面结构。

vue多级路由怎么实现