vue-router组件_导航树菜单组件与vue-router很好地集成

vue-router组件

导航树导航 (vue-tree-nav)

Navigation tree menu component with nice integration with vue-router.

导航树菜单组件，与vue-router集成良好。

• Ready out of the box!

  准备开箱！

• Side bar with infinite depth

  侧杆无限深度

• Links and dropdows with infinite depth on both right and left side

  左右两侧都具有无限深度的链接和下拉列表

• Font Awesome icons

  字体真棒图标

• Css transitions

  CSS过渡

• Beautiful themes to choose

  美丽的主题可供选择

• Complete customizable

  完全可定制

View Demo 查看演示 Download Source 下载源

安装 (Install)

npm install --save vue-tree-nav

用法 (Usage)

import Vue from 'vue'
  import treeNav from 'vue-tree-nav'

  new Vue({
    components: {
      'vue-tree-nav': treeNav
    },
    data: {
      left: [
        {
          label: 'Home',
          icon: 'home',
          href: '#/home'
        }, {
          label: 'Animals',
          children: [
            {
              label: 'Elephant',
              href: '#/animals/elephant'
            }, {
              label: 'Lion',
              href: '#/animals/lion'
            }, {
              label: 'Bear',
              href: '#/animals/bear'
            }, {
              label: 'Eagle',
              href: '#/animals/eagle'
            }, {
              label: 'Wolf',
              href: '#/animals/wolf'
            }

          ]
        }
      ],
      right: [
        {
          href: 'https://github.com/marcodpt/vue-tree-nav',
          icon: 'brands/github'
        }
      ]
    }
  }).$mount('#app')

<vue-tree-nav
    :left="left"
    :right="right"
  ></vue-tree-nav>

• If you pass directly your vue-router routes in side, left or right prop it will do some magic, ignoring routes with :variable and redirect for obvious reasons

  如果您直接在side ， left或right属性中传递vue-router路由，它将起到一些神奇的作用，因为明显的原因，忽略了：variable和redirect的路由

道具 (Props)

• side

  侧

  • type: Array
    类型：数组
  • default: []
    默认值：[]
  • Items below项目部分

• left

  剩下

  • type: Array
    类型：数组
  • default: []
    默认值：[]
  • Items below项目部分

• right

  对

  • type: Array
    类型：数组
  • default: []
    默认值：[]
  • Items below项目部分

• location

  位置

  • type: String
    类型：字符串
  • default: ""
    默认值：“”
  • description: Current location use $route.fullPath with vue-router or window.location.href without
    描述：当前位置将$ route.fullPath与vue-router或window.location.href一起使用，不带

• showPath

  showPath

  • type: Boolean
    类型：布尔型
  • default: true
    默认值：true
  • description: show current path near hamburguer menu
    描述：显示汉堡菜单附近的当前路径

• barScale

  barScale

  • type: Number
    类型：数字
  • default: 1
    默认值：1
  • description: scale of icons and font in top bar
    描述：顶部栏中的图标和字体比例

• sideScale

  sideScale

  • type: Number
    类型：数字
  • default: 1
    默认值：1
  • description: scale of icons and font in side bar
    描述：侧栏中图标和字体的比例

• bgColor

  bgColor

  • type: String
    类型：字符串
  • default: '#f3f3f3'
    默认值：“＃f3f3f3”
  • description: background color of top and side bar
    描述：顶部和侧面栏的背景颜色

• fontColor

  字体颜色

  • type: String
    类型：字符串
  • default: '#666666'
    默认值：'＃666666'
  • description: font color of top and side bar
    描述：顶部和侧面栏的字体颜色

• hoverColor

  hoverColor

  • type: String
    类型：字符串
  • default: '#dddddd'
    默认值：“＃dddddd”
  • description: background color in case of hovering any link
    描述：悬停任何链接时的背景色

• activeColor

  activeColor

  • type: String
    类型：字符串
  • default: '#000000'
    默认值：'＃000000'
  • description: active font color of top and side bar, active items will change font color
    描述：顶部和侧面栏的活动字体颜色，活动项目将更改字体颜色

侧面，左侧，右侧的项目 (Items of side, left, right)

• items (Object):

  项目(对象)：

  • • type: String
      类型：字符串
    • default: ""
      默认值：“”
    • description: label that appear in the screen
      描述：出现在屏幕上的标签
  • • type: String, Function
      类型：字符串，函数
    • default: ""
      默认值：“”
    • description: string it will be a normal link, otherwise it will call the function
      描述：字符串，它将是一个正常的链接，否则它将调用该函数
  • • type: String
      类型：字符串
    • default: ""
      默认值：“”
    • Font Awesome Icons字体超赞图标之一
  • • type: Array
      类型：数组
    • default: []
      默认值：[]
    • description: Again it is an array of items, in the side menu you can go infinity depth, in the top bar it will ignore, soon we will create a dropdown
      描述：同样是一个数组，在侧面菜单中您可以进入无限深，在顶部栏中它将忽略，不久我们将创建一个下拉列表

翻译自: https://vuejsexamples.com/navigation-tree-menu-component-with-nice-integration-with-vue-router-2/

vue-router组件