ruoyi‑vue3 添加【车辆管理】菜单组完整方案

若依Vue3采用后端动态路由，不需要手动改前端router文件；菜单、路由全部由后端「菜单管理」配置生成。
菜单结构：

车辆管理（目录组，仅分组，无页面）
├─ 车辆列表（业务页面）
└─ 车辆消息（业务页面）

一、后端菜单管理配置（系统管理 → 菜单管理 → 新增）

1. 新增父目录：车辆管理

2. 新增子菜单：车辆列表

在「车辆管理」菜单右侧，点击【新增子菜单】

3. 新增子菜单：车辆消息

继续给车辆管理新增子菜单

✅ 菜单保存完成后：进入【角色管理】，给使用角色勾选 车辆管理、车辆列表、车辆消息 权限，保存角色。

二、前端创建页面文件

路径：src/views/，新建目录结构

src/views/
└─ vehicle/
├─ vehicleList/
│ └─ index.vue // 车辆列表页面
└─ vehicleMsg/
└─ index.vue // 车辆消息页面

src/views/vehicle/vehicleList/index.vue 基础模板

<template>
<div class="app-container">
<el-card>
<!– 查询区域 –>
<div class="search-container">
<el-input v-model="queryParams.carNo" placeholder="车牌号" clearable style="width: 200px" />
<el-button type="primary" icon="Search" @click="getList">搜索</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button>
</div>
<!– 表格 –>
<el-table :data="list" border>
<el-table-column label="ID" prop="id" />
<el-table-column label="车牌号" prop="carNo" />
<el-table-column label="车辆类型" prop="carType" />
</el-table>
<pagination v-show="total>0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
</el-card>
</div>
</template>

<script setup name="VehicleList">
import { ref, reactive, onMounted } from 'vue'
import { getVehicleList } from '@/api/vehicle'

const list = ref([])
const total = ref(0)
const queryParams = reactive({
pageNum: 1,
pageSize: 10,
carNo: ''
})

const getList = async () => {
const res = await getVehicleList(queryParams)
list.value = res.rows
total.value = res.total
}

const resetQuery = () => {
queryParams.carNo = ''
getList()
}

onMounted(() => getList())
</script>

vehicleMsg/index.vue 复制上面模板，修改查询字段、表格列、调用接口即可。

三、新建api接口文件 src/api/vehicle.js

import request from '@/utils/request'

// 车辆列表
export function getVehicleList(query) {
return request({
url: '/vehicle/list',
method: 'get',
params: query
})
}

// 车辆消息列表
export function getVehicleMsgList(query) {
return request({
url: '/vehicle/msg/list',
method: 'get',
params: query
})
}

四、生效操作

⚠️重点踩坑提醒