从0搭建后台管理项目
会姐姐
前端开发,笔记记录
展开
-
递归组件生成动态菜单
5,将常量路由放入到仓库store/modules/user.ts中,引入后会报错,useUserStore中menuRoutes未定义,只需要在store/modules/types中定义一下类型。2,让菜单根据配置的路由动态的生成菜单,封装成组件动态生成菜单,在layout文件下新建文件menu。1,在跟组件layout下的index.vue中使用Element Plus中菜单组件。使用递归组件的前提的,组件必须有命名,所以添加了name:'Menu'3,layout/index.vue中引入。原创 2024-05-21 17:13:50 · 644 阅读 · 2 评论 -
后台管理菜单图标
3,在菜单组件在使用 src/layout/menu/index.vue(菜单组件源码见上一篇文章)在src/components/index.ts文件中注册全局组件。2,这时,全局都可以使用icon,在路由原信息中添加icon字段。mian.ts中会引入使用。原创 2024-05-21 18:37:17 · 242 阅读 · 1 评论 -
项目全部路由配置
动画是参考router-vue官网 v-enter-from 其中v即是模板中设置的name。在封装的菜单组件中(具体见上篇文章),给遍历出的每一个菜单加上点击事件。如果不想要使用左侧菜单栏,想要一整个屏幕都是此组件的话。3,跟组件展示路由出口的地方,可以进行封装,加上动画。6,引入全局路由对象,使用编程式路由进行跳转。4,封装的main/index文件。1,首先要添加需要的路由页面。放一个为例,其余是一样配置的。2,在路由中配置这些组件。注册组件不使用跟组件即可。5,点击菜单进行路由跳转。原创 2024-05-22 17:31:14 · 229 阅读 · 1 评论