当前位置：首页 > VUE

vue实现子路由

2026-02-19 02:37:04VUE

Vue 子路由的实现方法

在 Vue 项目中，子路由（嵌套路由）可以通过 Vue Router 实现。子路由允许在父路由的组件内嵌套其他路由组件，形成层级结构。

配置路由文件

在 router/index.js 中定义子路由。子路由通过 children 属性嵌套在父路由中。

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

const routes = [
  {
    path: '/parent',
    component: () => import('@/views/Parent.vue'),
    children: [
      {
        path: 'child1',
        component: () => import('@/views/Child1.vue')
      },
      {
        path: 'child2',
        component: () => import('@/views/Child2.vue')
      }
    ]
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

父组件中添加路由出口

在父组件 Parent.vue 中，需要添加 <router-view> 作为子路由的出口。

<template>
  <div>
    <h2>父组件</h2>
    <router-view></router-view>
  </div>
</template>

子路由导航

可以通过 <router-link> 或编程式导航访问子路由。

<template>
  <div>
    <router-link to="/parent/child1">子路由1</router-link>
    <router-link to="/parent/child2">子路由2</router-link>
  </div>
</template>

默认子路由

可以为父路由设置默认子路由，当访问父路由时自动重定向到默认子路由。

{
  path: '/parent',
  component: () => import('@/views/Parent.vue'),
  children: [
    {
      path: '',
      redirect: 'child1'
    },
    {
      path: 'child1',
      component: () => import('@/views/Child1.vue')
    }
  ]
}

动态子路由

子路由也可以使用动态路径参数。

{
  path: '/parent/:id',
  component: () => import('@/views/Parent.vue'),
  children: [
    {
      path: 'child',
      component: () => import('@/views/Child.vue')
    }
  ]
}

命名子路由

可以为子路由设置名称，方便编程式导航。

vue实现子路由

{
  path: '/parent',
  component: () => import('@/views/Parent.vue'),
  children: [
    {
      path: 'child',
      name: 'childRoute',
      component: () => import('@/views/Child.vue')
    }
  ]
}

通过以上方法可以灵活地在 Vue 项目中实现子路由功能，构建复杂的页面层级结构。