Vue前端开发-多级路由配置

news2024/12/27 5:11:07

在Vue 路由数组中，允许配置多级的路由对象结构，可以是二级、三级或者更多级别，最大级别原则上没有限制，但通常最大的是三或四级，这种路由结构，称之为多级路由。

例如：一级路由地址/list，打开的是一个学校列表组件，列表中又有年级链接，则年级的链接路由为/list/grade，这个年级路由则为二级路由，如果年级组件中又存在班级链接，则班级的链接路由为/list/grade/class，这个班级的路由则为三级路由。

多级路由结构的配置严格遵循JSON格式中父子之间的层级关系，子节点通过父节点中的children 属性向下进行配置，但在配置子类路由时，path路径中不能使用“/”符号开头，否则，子类路由将会以一级路由形式查找组件。

为了更好地说明多级路由配置的过程，接下来通过一个完整的实例来进行演示。

多级路由配置

1. 功能描述

在首页中点击“学校首页”链接，则路径为/list，并进入列表页，在列表页中，点击“进入年级”链接，则路径为/list/grade，并进入年级页，在年级页中，点击“进入班级”链接，则路径为/list/grade/cls，并进入班级页，并显示班级页中的内容。

2. 实现代码

在项目的views 文件夹中，分别添加三个名为“list”、“grade”、“cls”的.vue文件，用户路由跳转时对应的组件，在文件中分别加入如清单8-3、8-4、8-5所示代码。

代码清单8-3 list.vue代码

<template>
    <div>
        <nav>首页 > 列表</nav>
        <a href="/list/grade">进入年级</a>
        <router-view></router-view>
    </div>
</template>

代码清单8-4 grade.vue代码

<template>
    <div>
        <nav>首页 > 列表 > 年级</nav>
        <a href="/list/grade/cls">进入班级</a>
        <router-view></router-view>
    </div>
</template>

代码清单8-5 cls.vue代码

<template>
    <div>
        <nav>首页 > 列表 > 年级 > 班级</nav>
        <div>我是一名班级学生</div>
    </div>
</template>

为了实现多级路由跳转的功能，需要修改已完成基本配置的路由对象，先在src目录中添加一个名称为router的文件夹，并在文件夹中添加一个名为index的.js文件，加入如代码清单8-6所示的内容。

代码清单8-6 index.js代码

import { createRouter, createWebHistory } from 'vue-router';

// 配置组件对应路径
const routes = [
    {
        path: '/list',
        name: 'list',
        component: () => import('../views/list.vue'),
        children: [
            {
                path: 'grade',
                name: 'grade',
                component: () => import('../views/grade.vue'),
                children: [
                    {
                        path: 'cls',
                        name: 'cls',
                        component: () => 
				import('../views/cls.vue')
                    }
                ]
            }
        ]
    }
]
const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes
})
export default router

创建并导出路由对象后，还需要将该对象挂载到新建的app应用中，因此，需要将入口文件main.js进行如代码清单8-7所示的修改。

代码清单8-7 main.js代码

import { createApp } from 'vue'
import App from './App.vue'
import Global from './components/ch6/Global'
import router from './router/index'
let app = createApp(App);
app.component("Global", Global);
app.use(router);
app.mount('#app')