12.VueRouter中的嵌套路由是通过在父路由的组件模板中使用 <router-view> 来实现的,这样当访问-|||-子路由时,对应的组件就会渲染在_视图 __ 内

在Vue Router中，嵌套路由（Nested Routes）是一种强大的功能，它让你能够在单个路由配置下包含多个子路由。`<router-view>`标签就是实现这一功能的关键元素。当你在一个父路由组件的模板内使用`<router-view>`，Vue Router会在当前路由匹配到的组件内部动态渲染子路由所定义的组件。

具体步骤如下：

1. **设置父级路由**：在父级组件（通常是`<router-view>`所在的组件）的`components`属性或`<router-link>`里，定义一个或多个指向子路由的路径。

<!-- Parent Route.vue -->
<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  // ...
}
</script>

2. **配置子路由**：在Vue Router的`routes`数组里，为每个子路由定义它们各自的配置，包括名称、路径以及要加载的组件。

// router.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'

const routes = [
  {
    path: '/home',
    component: Home,
    children: [
      {
        path: '',
        name: 'HomeIndex',
        component: () => import('@/views/Home/Index.vue') // 嵌套组件
      },
      {
        path: 'details',
        name: 'HomeDetails',
        component: () => import('@/views/Home/Details.vue')
      }
    ]
  },
  // 其他路由...
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

3. **导航到子路由**：在组件内的`methods`或生命周期钩子中，你可以使用`this.$router.push`或`<router-link>`来导航到子路由。

当访问这些子路由时，对应的子组件会被渲染到`<router-view>`指定的位置，使得页面结构更加清晰，易于管理。