嵌套路由

简介

嵌套路由是一种在单页面应用中，通过路由规则进行层级嵌套，来展示复杂的组件结构关系的技术。

它的作用是为了实现拆分页面组件，并在父子路由之间建立关联，从而更好地组织复杂页面的结构，这样可以提示代码的可维护性和复用性，并且允许用户在页面间进行层级导航，也提升了用户的体验。

嵌套路由的优点

清晰的组件关系：使组件之间的关系更加清晰明了，有助于开发者理解和维护代码。
灵活性：可根据项目需求动态地配置和调整嵌套路由，从而满足不同页面结构的需求。
提升页面的加载效率：嵌套路由只加载当前活跃的路由组件，可提升页面加载效率。
支持复杂的页面布局：允许构建包含多个层级的页面布局，从而实现更灵活的用户界面设计。

基础用法

在上一节的例子中，为了能看到路由切换的效果，在 App.vue 文件中使用了 <router-view> 标签。

当涉及到嵌套路由时，会需要在子组件中再次使用 router-view 标签。

此外，还需要在路由配置中为子路由创建对应的规则，并在父路由的配置中添加一个 children 属性来指定这些子路由的配置信息。这样即可实现嵌套路由的效果。

下面是一个简单示例：

HogChild.vue

<template>
    <div>
        <h2>HogChild</h2>
    </div>
</template>

Hogwarts.vue

<template>
    <div>
        <h2>Hogwarts</h2>
        <router-link to="/hogwarts/hogchild">进入到子路由界面</router-link>
        <router-view></router-view>
    </div>
</template>

index.js

import Ceshiren from '../components/Ceshiren.vue'
import Hogwarts from '../components/Hogwarts.vue'
import HogChild from '../components/HogChild.vue'
const routes=[
    {
        path:'/ceshiren',
        component:Ceshiren
    },
    {
        path:'/hogwarts',
        component:Hogwarts,
        // 配置子路由
        children:[
            {
                path:"hogchild",
                component:HogChild
            }
        ]
    }
]

如此即可实现子路由的定义，由 Hogwarts 页面跳转到 Hogchild 页面的效果如下图所示，该页面的地址为：http://127.0.0.1:5173/#/hogwarts/hogchild：

嵌套的命名路由

命名路由是指在路由配置中为特定的路由规则分配一个名称，以便通过该名称来打开相应的路由。

通常会为子路由进行命名，以便更方便地进行导航。

此外，如果希望在导航时不显示嵌套路由，还可以为父路由分配一个名称，从而实现按名称导航到相应的路由。

通过使用命名路由，可以提升路由配置的可读性和维护性，使得代码更加清晰明了。

修改上述示例中的子路由配置，添加 name 属性，代码如下所示：

index.js

import {createRouter,createWebHashHistory} from 'vue-router'
import Ceshiren from '../components/Ceshiren.vue'
import Hogwarts from '../components/Hogwarts.vue'
import HogChild from '../components/HogChild.vue'
const routes=[
    {
        path:'/ceshiren',
        component:Ceshiren
    },
    {
        path:'/hogwarts',
        component:Hogwarts,
        children:[
            {
                path: "hogchild",
                component: HogChild,
                // 命名路由
                name: 'hogchildname'
            }
        ]
    }
]

Hogwarts.vue

<template>
    <div>
        <h2>Hogwarts</h2>
        <!-- 使用name属性导航到具体的路由 -->
        <router-link :to="{name: 'hogchildname'}">进入到子路由界面</router-link>
        <router-view></router-view>
    </div>
</template>

总结

本节内容主要涵盖了嵌套路由的概念、基本用法以及命名路由的写法。掌握了本节的内容，将能够根据实际需要设计具有层次和逻辑的路由跳转结构，从而更有效地管理和组织应用程序。