当前位置：首页 > article >正文

vue3:四嵌套路由的实现

article 2025/3/3 21:22:13

一、前言

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页面