Vue Router 中路由嵌套

[TOC]

## 嵌套路由基础

一些应用程序的 UI 由多层嵌套的组件组成。在这种情况下，URL 的片段通常对应于特定的嵌套组件结构，例如：

```BASH
/routerNesting/routerNestingPer                /routerNesting/routerNestingPost
┌───────────────────────────┐                  ┌───────────────────────┐
│ routerNesting             │                  │ routerNesting         │
│ ┌───────────────────────┐ │                  │ ┌───────────────────┐ │
│ │ routerNestingPer      │ │  ────────────>   │ │ routerNestingPost │ │
│ │                       │ │                  │ │                   │ │
│ └───────────────────────┘ │                  │ └───────────────────┘ │
└───────────────────────────┘                  └───────────────────────┘
```

**路由配置**：在需要嵌套路由中使用 children ，children 是一个数组，数组内同样放着路由对象 path、component……，配置示例如下

```js
const routes = [
  {
        path: '/routerNesting', name: 'routerNesting', component: () => import('@study/routerNesting.vue'), children: [
            { path: 'routerNestingPer', name: 'routerNestingPer', component: () => import('@study/routerNestingPer.vue') },
            { path: 'routerNestingPost', name: 'routerNestingPost', component: () => import('@study/routerNestingPost.vue') },
            { path: '', name: 'routerNestingDefault', component: () => import('@study/routerNestingDefault.vue') }
        ]
    }
]
```

> Tips：从上面的配置可以观察到，嵌套路由的path不要使用`/`开头，这个需要注意下，加了`/`会导致路由匹配错误

组件 App.vue

```HTML
<template>
  <router-view />
</template>
```

要嵌套的组件 routerNesting

```HTML
<template>
    <div>
    <h3>Router 嵌套路由</h3>
    <div>
        <router-view />
    </div>
    </div>
</template>
```

被嵌套的组件 routerNestingPer

```HTML
<template>
  <h3>子路由：path = "routerNestingPer", routerNestingPer</h3>
</template>
```
> Tips：routerNestingPost 同理不做赘述

App.vue 这里的 `<router-view>` ，是一个顶层的 router-view。它渲染顶层路由匹配的组件。同样地，一个被渲染的组件(routerNesting.vue)也可以包含自己嵌套的 `<router-view>`，它将渲染被嵌套的组件 routerNestingPer.vue 或routerNestingPost.vue

## 路由嵌套默认子路由

从上面的路由配置看到其中有一个如下的配置，path是一个空字符，这就表示这个组件是嵌套组件的默认组件，当只使用`/routerNesting` 路由访问时，会默认加载path为空字符的组件，如果没有配置这一项的话，那么在 routerNesting.vue 的 `<router-view>` 位置将会是一片空白

``` json
 { path: '', name: 'routerNestingDefault', component: () => import('@study/routerNestingDefault.vue') }
```

默认嵌套 routerNestingDefault

```HTML
<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
function goToPost() {
    router.push({ name: 'routerNestingPost' })
}
function goToPer() {
    router.push({ name: 'routerNestingPer' })
}
</script>
<template>
  <h3>默认子路由：path = "", routerNestingDefault</h3>
  <button @click="goToPost">跳转到 routerNestingPost</button>
  <button @click="goToPer">跳转到 routerNestingPer</button>
</template>
```

> Tips：从上面的 routerNestingDefault.vue 可以看到，子路由也可以通过路由命名动态构建直接访问

## 通过嵌套路由命名直接访问

这里分为两种情况，一个访问嵌套路由的子路由，一个是访问嵌套路由。访问嵌套路由的子路由，就看下面示例直接动态构建即可

``` js
router.push({ name: 'routerNestingPer' })
```

如果是通过命名访问嵌套路由的话需要注意，这里只会显示父路由组件，不会显示嵌套路由组件，也就是使用下面的方式导航到父路由组件，routerNestingDefault 不会显示

```js
router.push({ name: 'routerNesting' })
// 这个方式不会显示 routerNestingDefault 组件的内容
```

在一些特定的场景下确实会需要只显示父路由组件的内容，而不要渲染嵌套路由的组件，这时正好可以使用这种方式实现，但需要注意的是，这样实现方式在刷新浏览器后会显示出嵌套路由的组件内容，`因为它被视为指向路径/routerNesting 的导航，而不是命名路由`

> Tips：如果父路由有参数，导航子路由时会自动继承父路由的参数，[通过路由命名方式子路由参数不会刷新](/admin/Blog/SeeMarkdown?id=1478#通过路由命名方式子路由参数不会刷新)这个问题就是子路由继承父路由参数造成的问题（是vue的机制不算是bug）

## 忽略父组件

我们还可以仅利用路由的父子关系，但不嵌套路由组件。这对于将具有公共路径前缀的路由分组在一起或使用更高级的功能时很有用，例如：路由独享的守卫或路由元信息。

为了实现这一点, 我们在父路由中省略了 component 和 components 选项

```js
const routes = [
  {
    path: '/admin',
    children: [
      { path: '', component: AdminOverview },
      { path: 'users', component: AdminUserList },
      { path: 'users/:id', component: AdminUserDetails },
    ],
  },
]
```

由于父级没有指定路由组件，顶级 <router-view> 将跳过父级并仅使用子路由组件。