vue 组件 not defined_Vue、Spring Boot开发小而完整的Web前后端分离项目实战10

第10讲 左侧菜单初步实现

1.1、左侧菜单布局，如下所示

1.2、用到的组件 el-menu 组件

主要属性：

default-active 当前激活菜单的 index

unique-opened 是否只保持一个子菜单的展开

router 是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转

collapse 是否水平折叠收起菜单(仅在 mode 为 vertical 时可用)

2.1、实现步骤

2.1.1、在components目录中新建 MenuBar.vue组件，如下所示

                            导航一                     选项4         选项1                           导航二      

​

2.1.2、在Home页面引入MenuBar组件，并注册使用

Home.vue代码如下所示

Element UI、Shiro、Spring Boot权限管理系统实战

         

                                                                                                                个人中心                       退出登录                                              

                 

欢迎您，管理员

                 

2020.06.23 13:50:30 星期一

             

         

                                                                      Main                   ​​