vue-router嵌套路由

Vue Router 是一个官方提供的 Vue.js 的路由管理器，可以用于构建单页面应用程序。嵌套路由是指在一个路由的组件中使用另一个路由。

在 Vue Router 中，可以通过在路由配置文件中定义嵌套路由。嵌套路由的配置是以树形结构来组织的，父级路由将会嵌套渲染其子路由的组件。

下面是一个示例的路由配置文件，演示了如何使用嵌套路由：

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

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: Home,
    children: [
      {
        path: '',
        component: Dashboard
      },
      {
        path: 'about',
        component: About
      },
      {
        path: 'products',
        component: Products,
        children: [
          {
            path: '',
            component: ProductList
          },
          {
            path: ':id',
            component: ProductDetail
          }
        ]
      }
    ]
  }
]

const router = new VueRouter({
  routes
})

export default router

在上面的代码中，父级路由 '/' 下包含了三个子路由：Dashboard、About 和 Products。而 Products 路由又包含了两个子路由：ProductList 和 ProductDetail。

在组件中使用嵌套路由时，需要在父级组件中使用 `<router-view>` 标签来渲染子路由的内容。

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

在父级组件的模板中，通过使用 `<router-view>` 标签，子路由的内容将会被渲染在这个位置。

这就是 Vue Router 中嵌套路由的基本使用方法。通过嵌套路由，可以更好地组织和管理应用程序的路由结构，实现更复杂的页面布局和导航功能。