当前位置：首页 > VUE

vue实现多级路由

2026-02-18 06:01:41VUE

Vue 多级路由实现方法

使用嵌套路由

在 Vue Router 中通过 children 属性定义嵌套路由，适用于父子组件层级明确的场景。路由配置示例：

const routes = [
  {
    path: '/parent',
    component: Parent,
    children: [
      {
        path: 'child',
        component: Child,
        children: [
          { path: 'grandchild', component: Grandchild }
        ]
      }
    ]
  }
]

动态路由匹配

通过冒号 : 标记动态路径参数，实现灵活的多级路由。适用于需要参数传递的场景：

{
  path: '/user/:id/posts/:postId',
  component: UserPost
}

命名视图

在同一个页面中显示多个命名视图，适用于复杂布局需求：

{
  path: '/multi-view',
  components: {
    default: MainView,
    sidebar: SidebarView,
    footer: FooterView
  }
}

路由元信息

通过 meta 字段添加路由元信息，适用于权限控制等场景：

{
  path: '/admin',
  component: Admin,
  meta: { requiresAuth: true }
}

路由守卫

使用全局或路由独享守卫控制导航：

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

路由懒加载

优化性能通过动态导入组件：

const Child = () => import('./Child.vue')

完整示例

典型的三级路由配置示例：

const router = new VueRouter({
  routes: [
    {
      path: '/dashboard',
      component: Dashboard,
      children: [
        {
          path: 'analytics',
          component: Analytics,
          children: [
            { path: 'realtime', component: RealtimeStats }
          ]
        }
      ]
    }
  ]
})

在模板中使用 <router-view> 嵌套：

<!-- 一级路由 -->
<router-view></router-view>

<!-- 二级路由 -->
<router-view name="child"></router-view>

<!-- 三级路由 -->
<router-view name="grandchild"></router-view>

实现多级路由时需注意：