vue 移动端树结构功能_Vue2 实现树形菜单（多级菜单）功能模块

结构示意图

├──index.html

├──main.js

├──router

│└──index.js # 路由配置文件

├──components # 组件目录

│├──App.vue # 根组件

│├──Home.vue # 大的框架结构组件

│├──TreeView.vue

│├──TreeViewItem.vue

│└──TreeDetail.vue

├──store

├──index.js # 我们组装模块并导出 store 的地方

├──modules # 模块目录

└──menusModule.js # 菜单模块

这个多级菜单实现的功能如下：

1、可展示多级菜单，理论上可以展无限级菜单

2、当前菜单高亮功能

3、刷新后依然会自动定位到上一次点击的菜单，即使这个是子菜单，并且父菜单会自动展开

4、子菜单的显示隐藏有收起、展开，同时带有淡入效果

这个例子用到的知识点：路由、状态管理、组件。

状态管理安装：

npm install --save vuex

我们先来看看效果演示图：

程序员是用代码来沟通的，所以费话不多说，直接上码：

index.html

Vue 实现树形菜单(多级菜单)功能模块- 云库网