【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/，点击左侧菜单进入 系统管理 页面，点击顶部按钮观察路由切换效果。