vue子路由如何实现

Vue 子路由实现方法

在 Vue 项目中，子路由（嵌套路由）可以通过 Vue Router 的 children 配置实现。以下是具体步骤：

配置路由文件

在路由配置文件（通常是 router/index.js）中，通过 children 属性定义子路由。父路由需要指定一个 <router-view> 用于渲染子路由组件。

import { createRouter, createWebHistory } from 'vue-router'
import ParentComponent from '../views/ParentComponent.vue'
import ChildComponent1 from '../views/ChildComponent1.vue'
import ChildComponent2 from '../views/ChildComponent2.vue'

const routes = [
  {
    path: '/parent',
    component: ParentComponent,
    children: [
      {
        path: 'child1',
        component: ChildComponent1
      },
      {
        path: 'child2',
        component: ChildComponent2
      }
    ]
  }
]

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

export default router

父组件中添加 <router-view>

在父组件模板中，添加 <router-view> 作为子路由的出口。

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

子路由导航

在父组件或其它地方，可以通过 <router-link> 或编程式导航跳转到子路由。

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

默认子路由

如果需要设置默认子路由，可以通过 redirect 或空路径实现。

{
  path: '/parent',
  component: ParentComponent,
  children: [
    {
      path: '',
      component: DefaultChildComponent
    },
    {
      path: 'child1',
      component: ChildComponent1
    }
  ]
}

动态子路由

子路由也支持动态路径参数。

{
  path: '/parent/:id',
  component: ParentComponent,
  children: [
    {
      path: 'child',
      component: ChildComponent
    }
  ]
}

通过以上方法，可以轻松实现 Vue 中的子路由功能。