当前位置：首页 > VUE

vue实现多级路由

2026-01-17 13:28:00VUE

Vue 实现多级路由的方法

使用嵌套路由

在 Vue Router 中，可以通过 children 属性实现多级路由嵌套。在路由配置中，父路由的 children 数组包含子路由配置，子路由的路径会自动继承父路由的路径。

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

动态路由匹配

多级路由中可以使用动态路径参数（:param）实现灵活的路由匹配。动态参数可以通过 $route.params 访问。

const routes = [
  {
    path: '/user/:id',
    component: UserComponent,
    children: [
      {
        path: 'profile',
        component: ProfileComponent
      },
      {
        path: 'posts',
        component: PostsComponent
      }
    ]
  }
];

命名路由与命名视图

命名路由和命名视图可以更精确地控制路由跳转和组件渲染。命名路由通过 name 属性定义，命名视图通过 <router-view name="viewName"> 定义。

const routes = [
  {
    path: '/settings',
    component: SettingsLayout,
    children: [
      {
        path: 'profile',
        name: 'settings-profile',
        components: {
          default: ProfileSettings,
          sidebar: SettingsSidebar
        }
      }
    ]
  }
];

路由守卫

多级路由中可以使用全局守卫、路由独享守卫或组件内守卫控制导航行为。例如，在子路由中设置 beforeEnter 守卫。

const routes = [
  {
    path: '/admin',
    component: AdminLayout,
    children: [
      {
        path: 'dashboard',
        component: AdminDashboard,
        beforeEnter: (to, from, next) => {
          if (isAuthenticated) next();
          else next('/login');
        }
      }
    ]
  }
];

路由懒加载

通过动态导入（import()）实现路由懒加载，优化多级路由的性能。懒加载的路由组件会在访问时按需加载。

const routes = [
  {
    path: '/features',
    component: () => import('./FeaturesLayout.vue'),
    children: [
      {
        path: 'list',
        component: () => import('./FeaturesList.vue')
      }
    ]
  }
];

路由元信息

通过 meta 字段为多级路由添加自定义信息，例如页面标题、权限要求等。meta 信息可以在导航守卫中访问。

const routes = [
  {
    path: '/account',
    component: AccountLayout,
    meta: { requiresAuth: true },
    children: [
      {
        path: 'details',
        component: AccountDetails,
        meta: { title: 'Account Details' }
      }
    ]
  }
];