Bootstrap

12 使用Vue+Vue-router+el-menu实现菜单功能实战

前言

上节回顾

上一小节我们使用H5+CSS3实现了管理平台的架构布局,并且通过Vuex的使用,获取到前端数据本地化存储的username,绑定到右上角进行全局展示。还不了解上下文的同学可以回顾一下 使用Vue+Vuex+CSS3完成管理端响应式架构模板实战 。

本节介绍

本小节已经是专栏的第10篇博客了,我们将继续维护添加Vue-router的路由数据,这些路由都是后续实战业务的真实路由了,在添加部分路由的同时,我们将借助ElementUI的el-munu组件,来实现左侧菜单功能的实战。其实使用el-menu并非重点,我们只是做一个基本使用,重点是我们将自研实现一个自己的tg-menu组件,用来替换el-menu组件,块一起来看看吧。

目录

前言

上节回顾

本节介绍

一、基于el-menu组件的菜单功能

1. 添加路由数据

2. 路由属性的介绍 

 3. 引入el-menu,开发菜单组件

二、自研tg-menu组件的菜单

1. 引入tg-menu组件

2. 引入路由数据,维护菜单组件数据

3. 无子级菜单和有子级菜单的区分

4. 当前菜单的高亮展示

5. tg-munu组件完整代码

6. tg-memu菜单组件包含的功能 

三、专栏进度汇报

1. 目前专栏的博客进度

2. 前端部分的内容架构进展

3. 前端部分代码目录进展

;