当前位置：首页 > VUE

vue实现多级路由

2026-03-09 18:57:53VUE

Vue 多级路由实现方法

Vue Router 支持嵌套路由（多级路由），通过 children 配置实现层级关系。以下是具体实现方式：

路由配置

在 router/index.js 中定义嵌套路由结构：

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

路由视图渲染

父级组件需要包含 <router-view> 用于渲染子路由：

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

动态路由匹配

可通过冒号 : 实现动态路径参数：

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

命名路由

为路由设置 name 属性便于跳转：

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

编程式导航

在组件中使用 $router 进行跳转：

this.$router.push('/parent/child/grandchild')
// 或使用命名路由
this.$router.push({ name: 'settings.account' })

路由守卫

可为嵌套路由设置导航守卫：

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 验证逻辑
  }
  next()
})

默认子路由

设置空路径作为默认渲染的子路由：

{
  path: '/dashboard',
  component: Dashboard,
  children: [
    {
      path: '',
      component: DashboardDefault
    },
    {
      path: 'analytics',
      component: DashboardAnalytics
    }
  ]
}

实现多级路由时需注意：

vue实现多级路由