夏洛克丶旭的博客

随着vue3和elementPlus稳定版发布,现在需要对之前的框架进行升级,是基于vue3++Pinia+typescript开发的一个后台模板，实现了无限级菜单，页面、按钮级别的权限管理，为了减少前后端的沟通成本，页面、按钮级别的权限验证和动态路由表的存储校验，也都由前端完成，这样前端新建页面或者删除页面都不需要通过后台去增加删除路由表。

这个权限管理就是为了方便,跟系统安全真的不沾边，只是根据后台返回的角色信息来生成他可以看见的菜单和按钮，显示菜单的方法是根据权限删除掉路由表里没有权限的路由，然后再动态添加，原本包含没有访问权限的原路由表只要打开页面运行代码就已经不存在了，并且404页面除了过滤掉项目没有的路由外，同时每次的路由跳转都会鉴权。如果你知道了没有权限的路由试着强行跳转会因为没有权限直接会跳转404。

权限验证页面级别权限路由：默认挂载不需要权限的路由，例如：登录、主页。需要权限的页面通过 router.addRoutes(点击查看官方文档) 动态添加更多的路由规则，404拦截页面需要放在路由表的最后,否则 /404 后面的路由会被404拦截，通过路由元信息meta(点击查看官方文档)记录路由需要的权限。为了菜单列表可以被翻译，路由表的 name 属性值通过 i18n 的英文对照表来获取，...

框架布局本章只介绍基础布局，和一些主要的js，页面上基本上都是些交互事件，项目代码上都有注释，不懂的地方debug跑一变就知道了，只是这些事件基本上没有独立存在的，相互之间都有关联框架风格新建页面：/src/views/layout/layout.vue<!-- layout.vue --><template> <div id=&a

i18n国际化多语言翻译使用框架采用vue-i18n版本 8.4.0，使用npm安装新建文件夹src/i18n,目录如下i18n.js//i18n.jsimport Vue from 'vue'import locale from 'element-ui/lib/locale'import VueI18n from 'vue-i18n'import messages from ...