# Vuejs 导航

**Repository Path**: cg_front_end/vue-nav-tree

## Basic Information

- **Project Name**: Vuejs 导航
- **Description**: 使用 Css 封装的一款导航菜单
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2020-03-16
- **Last Updated**: 2021-04-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<!--
 * @Descripttion:
 * @Author: YuZhenJing
 * @Date: 2020-02-10 17:44:34
 * @LastEditors: YuZhenJing
 * @LastEditTime: 2020-03-24 18:46:17
 -->

### vue-nav-tree 是什么

- vue-nav-tree 使用 Css 封装的一款导航菜单插件，只要您是基于 VUE 框架开发便可使用 vue-nav-tree

### 为什么使用 vue-nav-tree

- 小巧无任何依赖，这意味着无论您使用的什么 UI 框架都可使用
- 此插件开箱即用，只需按照数据结构设置数据源即可

### vue-nav-tree 第三方依赖

- vue-router

### vue-nav-tree 使用

- Menu Attribute

  | 属性名         | 类型   | 是否必填 | 可选值 | 默认值  | 描述               |
  | -------------- | ------ | -------- | ------ | ------- | ------------------ |
  | navData        | Array  | 是       | -      | -       | 导航数据源         |
  | default-active | String | 否       | -      | -       | 当前激活菜单的 url |
  | active-color   | String | 否       | -      | #409EFF | 激活菜单颜色       |

- navData Attribute

  | 属性名      | 类型   | 是否必填 | 可选值 | 默认值 | 描述                                 |
  | ----------- | ------ | -------- | ------ | ------ | ------------------------------------ |
  | funListCode | String | 是       | -      | -      | 导航唯一编码                         |
  | funListName | String | 是       | -      | -      | 导航名称                             |
  | funListIcon | String | 否       | -      | -      | 导航标题 注:图标只针对一级菜单有效   |
  | funListType | String | 否       | -      | fun    | 导航类别 group:分组节点 fun:功能节点 |
  | funListUrl  | String | 否       | -      | -      | 导航路径 funListType=fun 时必填      |

### vue-nav-tree 安装以及使用

1. 安装

```
npm i vue-nav-tree --save
```

2. main.js

```javascript
import VueNavTree from 'vue-nav-tree'
Vue.use(VueNavTree)
```

3. components

```html
<nav-menu :navData="navMenu" :default-active="$route.path"></nav-menu>
```

4. example data

```javascript
export default {
  data() {
    return {
      navMenu: [
        {
          funListCode: 'home',
          funListName: '首页',
          funListIcon: 'las la-home',
          funListUrl: '/home'
        },
        {
          funListCode: '1',
          funListType: 'group',
          funListName: '资源管理',
          funListIcon: 'las la-cog',
          children: [
            {
              funListCode: '1-1',
              funListName: '安全管理',
              funListType: 'group',
              children: [
                {
                  funListCode: '1-1-1',
                  funListName: '用户管理',
                  funListUrl: '/user-list'
                },
                {
                  funListCode: '1-1-2',
                  funListName: '角色管理',
                  funListUrl: '/role-list'
                }
              ]
            },
            {
              funListCode: '1-2',
              funListName: '系统配置',
              funListUrl: '/system-conf'
            }
          ]
        },
        {
          funListCode: '2',
          funListName: '帮助中心',
          funListType: 'group',
          funListIcon: 'las la-hands-helping',
          children: [
            {
              funListCode: '2-1',
              funListName: '移动端驱动测试',
              funListType: 'group',
              children: [
                {
                  funListCode: '2-1-1',
                  funListName: '原生插件测试',
                  funListType: 'group',
                  children: [
                    {
                      funListCode: '2-1-1-1',
                      funListName: '相机测试',
                      funListUrl: '/camera-test'
                    }
                  ]
                },
                {
                  funListCode: '2-1-2',
                  funListName: '平台测试',
                  funListType: 'group',
                  children: [
                    {
                      funListCode: '2-1-2-1',
                      funListName: 'Android端',
                      funListType: 'group',
                      children: [
                        {
                          funListCode: '2-1-2-1-1',
                          funListName: '内置应用',
                          funListUrl: '/built-in-test'
                        },
                        {
                          funListCode: '2-1-2-1-2',
                          funListName: '第三方应用',
                          funListUrl: '/other-test'
                        }
                      ]
                    }
                  ]
                }
              ]
            },
            {
              funListCode: '2-2',
              funListName: 'PC端驱动测试',
              funListType: 'group',
              children: [
                {
                  funListCode: '2-2-1',
                  funListName: '总控接口测试',
                  funListUrl: '/asm-api'
                }
              ]
            }
          ]
        }
      ]
    }
  }
}
```

## License

[MIT](http://opensource.org/licenses/MIT)

Copyright (c) 2020-present, Jenkin Yu