vue3:四嵌套路由的实现

一、前言 1、嵌套路由的含义

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

2、使用场景

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

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

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

4、实现参考

可参考官网

嵌套路由 | Vue Router 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的页面效果

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