【Vue3】嵌套路由

背景

随着年龄的增长，很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来，技术出身的人总是很难放下一些执念，遂将这些知识整理成文，以纪念曾经努力学习奋斗的日子。本文内容并非完全原创，大多是参考其他文章资料整理所得，感谢每位技术人的开源精神。

简介

本文介绍 Vue3 中嵌套路由的基本写法。

开发环境

分类	名称	版本
操作系统	Windows	Windows 11
IDE	Visual Studio Code	1.91.1

开发步骤及源码

1> 在 【Vue3】路由基础 的基础上新增 3 个页面组件。

• Permission.vue

  <template><div class="permission">这是权限页面</div>
  </template><script setup lang="ts">
  </script><style scoped lang="scss">
  </style>
  

• Log.vue

  <template><div class="log">这是日志页面</div>
  </template><script setup lang="ts">
  </script><style scoped lang="scss">
  </style>
  

• Warn.vue

  <template><div class="warn">这是告警页面</div>
  </template><script setup lang="ts">
  </script><style scoped lang="scss">
  </style>
  

2> 修改 src/router/index.ts，添加新增的 3 个页面组件的路由配置，全部置于 /system 下作为二级路由使用。

import { createRouter, createWebHistory } from 'vue-router'
import Dashboard from '@/pages/Dashboard.vue'
import Log from '@/pages/Log.vue'
import Permission from '@/pages/Permission.vue'
import Warn from '@/pages/Warn.vue'
import System from '@/pages/System.vue'
import About from '@/pages/About.vue'const router = createRouter({// 路由器工作模式history: createWebHistory(),routes: [{path: '/dashboard',component: Dashboard},{path: '/system',component: System,children: [{path: 'permission',component: Permission},{path: 'log',component: Log},{path: 'warn',component: Warn}]},{path: '/about',component: About}]
})export default router

3> 修改 System.vue 页面组件，添加导航到 3 个新增页面组件的路由功能。

<template><div class="system"><div class="navigate"><RouterLink to="/system/permission" class="link" active-class="link-active">权限</RouterLink><RouterLink to="/system/log" class="link" active-class="link-active">日志</RouterLink><RouterLink to="/system/warn" class="link" active-class="link-active">告警</RouterLink></div><hr><div class="content"><RouterView /></div></div>
</template><script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
</script><style scoped lang="scss">
.system {padding: 20px 10px;.navigate {margin-bottom: 20px;.link {background: #eee;border-radius: 3px;color: #aaa;margin-right: 5px;padding: 5px 15px;text-decoration: none;}.link-active {background: #75C5BA;color: blue;}}
}
</style>

4> 执行命令 npm run dev 启动应用，浏览器访问：http://localhost:5173/，点击左侧菜单进入 系统管理 页面，点击顶部按钮观察路由切换效果。