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

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

菜单结构：

复制代码

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

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

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

配置项	填写值
菜单名称	车辆管理
父菜单	顶级菜单(0)
显示顺序	按需填写，例如 5
菜单类型	目录(M)
路由地址	`vehicle`
组件路径	留空！目录不能填组件
权限标识	`vehicle::`
图标	可选，如 `truck`
是否可见	是

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

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

配置项	填写值
菜单名称	车辆列表
父菜单	车辆管理
显示顺序	1
菜单类型	菜单©
路由地址	`vehicleList`
组件路径	`vehicle/vehicleList/index`
权限标识	`vehicle:list:list`
是否可见	是

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

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

配置项	填写值
菜单名称	车辆消息
父菜单	车辆管理
显示顺序	2
菜单类型	菜单©
路由地址	`vehicleMsg`
组件路径	`vehicle/vehicleMsg/index`
权限标识	`vehicle:msg:list`
是否可见	是

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

二、前端创建页面文件

路径：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
  })
}

四、生效操作

角色权限勾选保存
退出登录，重新登录（动态路由需要重登录拉取最新菜单）
左侧菜单出现「车辆管理」分组，可以展开看到车辆列表、车辆消息，点击正常跳转页面。

⚠️重点踩坑提醒

父目录组件路径必须为空，填写会白屏报错。
组件路径格式：vehicle/vehicleList/index，不要写 src/views，不要加 .vue。
修改菜单/权限后必须重登，浏览器刷新不会更新动态路由。
图标名称要和若依内置图标库一致，写错图标不显示。
后端需要提供对应接口 /vehicle/list、/vehicle/msg/list，否则页面请求报错。
不要手动修改 router/index.js，全部由后端菜单驱动。