本文分别使用 SFC（模板方式）和 tsx 方式对 Element Plus el-menu 组件进行二次封装，实现配置化的菜单，有了配置化的菜单，后续便可以根据路由动态渲染菜单。

Vue+Element 实现管理页面菜单栏， 点击菜单时 router 改变 hash 访问不同子组件。但是改变 hash 时菜单栏展开状态和 highlight 并不会同步， 需要手动实现。

vue-contextmenujs:Vue 原生实现右键菜单组件, 零依赖;npm 安装npm install vue-contextmenujs;测试中使用的是element-ui图标 ;

这是一个相当炫的功能，让网页看起来像桌面程序，如window的开始菜单。实现原理基本和纯CSS相册差不多，但要注意的事项比较多，让我们一步步来吧。

数据结构中含有图片、名称、children的树形结构，需要展示出每一级的图片名称和图片，找了些树形图的插件，都没有展示大的图片的，一般都是小图标，就自己试着写一个包含图的简单的插件。

做权限管理，一个核心思想就是后端做权限控制，前端做的所有工作都只是为了提高用户体验，我们不能依靠前端展示或者隐藏一个按钮来实现权限控制，这样肯定是不安全的。就像用户注册时需要输入邮箱地址，前端校验之后，后端还是要校验

1. 首先可以滑出菜单 2. 菜单滑动到一定距离完全滑出，未达到距离回滚 3. 菜单数量、样式随意定制 4. 菜单点击回调 5. 菜单展开时，点击 item 收回菜单，需求明了以后就可以写代码了。

在pc 管理系统这种类型的产品，通常会涉及到账号权限的控制，不同的账号权限能浏览的功能模块是不同的，对应侧边栏菜单模块的显示也会不同。单点登录类系统，通常会多个项目公用一套登录系统，项目首页直接就是dashboard 或者 index页面

熟练使用导航栏，对于网站排版非常重要,使用CSS，js，jq等你可以转换成好看的导航栏而不是枯燥的HTML菜单。