vue3:四嵌套路由的实现

一、前言

1、嵌套路由的含义

嵌套路由的核心思想是：在某个路由的组件内部，可以定义子路由，这些子路由会渲染在父路由组件的特定位置（通常是 <router-view> 标签所在的位置）。通过嵌套路由，你可以实现多层级的页面布局。

2、使用场景

嵌套路由通常用于以下场景：

• ​多层布局：比如一个页面有顶部导航栏、侧边栏和内容区域，内容区域可以根据路由动态变化。
• ​模块化开发：将页面拆分为多个子模块，每个子模块对应一个子路由。
• ​动态路由：根据用户权限或其他条件动态加载子路由。

3、实现方式

在 Vue Router 中，通过 children 属性来定义嵌套路由。children 是一个数组，每个元素都是一个子路由配置对象。

4、实现参考

可参考官网

嵌套路由 | Vue Routerhttps://router.vuejs.org/zh/guide/essentials/nested-routes.html

5、示例展示

// 路由配置
const routes = [{path: '/parent', // 父路由路径component: ParentComponent, // 父路由组件children: [{path: 'child1', // 子路由路径（相对于父路由）component: Child1Component // 子路由组件},{path: 'child2',component: Child2Component}]}
];// 创建路由实例
const router = new VueRouter({routes
});

在父组件 ParentComponent 中，需要使用 <router-view> 来渲染子路由组件：

<!-- ParentComponent.vue -->
<template><div><h1>父组件</h1><router-view></router-view> <!-- 子路由组件会渲染在这里 --></div>
</template>

访问嵌套路由

访问嵌套路由时，路径是父路由路径和子路由路径的组合。例如：

• /parent/child1 会渲染 Child1Component。
• /parent/child2 会渲染 Child2Component。

二、实现步骤

1、找到初始写入路由页面

2、新建一个专门带左侧导航条的Layout

①路径

src->layout->index.vue 

②代码

index.vue

<template><div>左侧导航条</div><div>右侧内容<!-- 右侧内容,引入的页面 --><router-view></router-view><!-- 或者使用 --><!-- <RouterView /> --></div>
</template>

③改写路由代码

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: '/',name: 'main',component: () => import('../layout/index.vue'),children: [{path: '/home',name: 'home',component: HomeView,},{path: '/about',name: 'about',component: () => import('../views/AboutView.vue'),},],}, {path: '/:pathMatch(.*)*',name: 'NotFound',component: () => import('../views/NotFoundView.vue'),},],
})export default router

父级路由

为刚才新建立的layout的index.vue页面

path: '/',
name: 'main',
component: () => import('../layout/index.vue'),

path：父路由路径，这里的值为/,可以结合多个页面对比一下

这是path: '/'

下面是path: '/home'

name：为此路由命名，可以省略

component:表示父路由组件，这里也就是引入父路由的页面

子路由

这里存入两个页面一个是之前的home页面，一个是about页面

这里的home的component的值为HomeView,其实是因为顶部已经有引入了，其实写法一样，只是换成了变量的形式

3、实现效果

现在可以看出父路由下的页面其实就是layout/index.vue的页面效果

子路由的页面效果就是在右侧内容中加入了页面引入