如何一招解决vue3路由、菜单、tabs的摸鱼神器问题？

本文共计2529个文字，预计阅读时间需要11分钟。

创建一个后台管理系统，首先需设置路由，接着配置菜单（可能包含导航），然后添加动态tabs，最后加上权限判断。这不是很复杂吗？路由和菜单的配置，以及权限判断，都是系统搭建中的常规步骤。

做一个管理后台，首先要设置路由，然后配置菜单（有时候还需要导航），再来一个动态tabs，最后加上权限判断。

这个是不是有点繁琐？尤其是路由的设置和菜单的配置，是不是很雷同？那么能不能简单一点呢？如果可以实现设置一次就全部搞定的话，那么是不会很香呢？

我们可以简单封装一下，实现这个愿望。

定义一个结构

我们可以参考 vue-router 的设置 和 el-menu 的参数，设置一个适合我们需求的结构：

• ./router.js

import { createRouter } from '@naturefw/ui-elp' import home from '../views/home.vue' const router = { /** * 基础路径 */ baseUrl: baseUrl, /** * 首页 */ home: home, menus: [ { menuId: '1', // 相当于路由的 name title: '全局状态', // 浏览器的标题 naviId: '0', // 导航ID path: 'global', // 相当于 路由 的path icon: FolderOpened, // 菜单里的图标 childrens: [ // 子菜单，不是子路由。