Vue.js树导航菜单组件 - vue-tree-navigation

Vue.js树导航菜单组件 - vue-tree-navigation
插件名称 vue-tree-navigation
发布时间 2020年11月2日
插件作者 MisRob

支持无限数量级别的Vue.js树导航菜单。

更多功能:

  • 您可以定义默认打开级别
  • 专注于核心功能,仅包含必要的样式

安装和下载:

# NPM
$ npm install vue-tree-navigation --save

1.从vue-router路由生成的导航项

假设您将vue-router与以下路由定义一起使用

const routes = [
  {
    name: 'Home',
    path: '/',
  },
  {
    name: 'Running',
    path: '/running',
    children: [
      {
        name: 'Barefoot',
        path: 'barefoot',
      },
    ],
  },
  {
    name: 'Yoga',
    path: '/yoga',
    children: [
      {
        name: 'Mats',
        path: 'mats',
      },
      {
        name: 'Tops',
        path: 'tops',
      },
    ],
  },
  {
    name: 'About',
    path: '/about',
    children: [
      {
        name: 'Career',
        path: 'career',
        children: [
          {
            name: 'Design',
            path: 'design',
          },
        ],
      },
    ],
  },
];

然后只需包含vue-tree-navigation

<template>
  <vue-tree-navigation />
</template>

它将生成以下菜单:

- Home          // --> /
- Running       // --> /running
  - Barefoot    // --> /running/barefoot
- Yoga          // --> /yoga
  - Mats        // --> /yoga/mats
  - Tops        // --> /yoga/tops
- About         // --> /about
  - Career      // --> /about/career
    - Design    // --> /about/career/design

不要忘记使用命名路线,因为vue-tree-navigation使用name字段标记导航项。