vue嵌套路由怎么配置

在 Vue 中嵌套路由的配置步骤如下：

1. 在主路由文件中（通常是 `router/index.js`），导入 `Vue` 和 `VueRouter` 并使用 `Vue.use(VueRouter)` 注册路由插件。
2. 创建路由实例，定义路由规则，并在 `routes` 数组中添加子路由。
3. 在主组件（通常是 `App.vue`）中添加 `<router-view>` 标签，这个标签会根据当前路由匹配到的组件渲染子组件或子路由。
4. 在子路由组件中添加 `<router-view>` 标签以渲染子组件或子路由。

以下是一个简单的示例：

// router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: Home,
    children: [
      {
        path: '',
        component: Dashboard
      },
      {
        path: 'profile',
        component: Profile
      }
    ]
  },
  {
    path: '/about',
    component: About
  }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router

<!-- App.vue -->

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<!-- Home.vue -->

<template>
  <div>
    <h1>Home</h1>
    <router-view></router-view>
  </div>
</template>

<!-- Dashboard.vue -->

<template>
  <div>
    <h2>Dashboard</h2>
  </div>
</template>

<!-- Profile.vue -->

<template>
  <div>
    <h2>Profile</h2>
  </div>
</template>

在这个示例中，访问 `/` 路径会渲染 `Home` 组件，并显示 `Dashboard` 子组件。访问 `/profile` 路径会渲染 `Home` 组件，并显示 `Profile` 子组件。访问 `/about` 路径会渲染 `About` 组件。