Vue之动态菜单

简单易用的Vue动态菜单，采用了iview插件库，只做了菜单的展示，其他的功能都很简单，读者可以自己尝试。

1、main.js加入如下依赖

import Vuefrom 'vue'

import Appfrom './App'

import ViewUI from 'view-design'

import 'view-design/dist/styles/iview.css'

import {Message}from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ViewUI);

Vue.component(Message);

Vue.prototype.$message =Message;

2、在菜单页加上如下代码

<template>
  <Menu ref="asideMenu" :active-name="activeMenuName" theme="dark" width="auto"
        accordion
        @on-select="goPage">
    <div v-for="(menu1) in menuList">
      <MenuItem v-if="menu1.children==null" v-bind:name="menu1.name">
          <Icon v-bind:type="menu1.icon" />
          {{menu1.title}}
      </MenuItem>
      <Submenu v-if="menu1.children!=null" v-bind:name="menu1.name">
        <template slot="title">
          <Icon v-bind:type="menu1.icon"/>
          {{menu1.title}}
        </template>
        <div v-for="(menu2) in menu1.children">
          <MenuItem v-bind:name="menu2.name">{{menu2.title}}</MenuItem>
        </div>
      </Submenu>
    </div>
  </Menu>
</template>
<script>
    export default {
        data() {
            return {
                menuList: [{"name":"首页","title":"首页","icon":"ios-home","path":"/home"},{"name":"用户管理","title":"用户管理","icon":"ios-people","path":"/user","children":[{"name":"客户管理","title":"客户管理","icon":null,"path":"/customer","children":null},{"name":"系统用户管理","title":"系统用户管理","icon":null,"path":"/admin","children":null}]}],
                activeMenuName: '首页',
            }
        },
        methods: {
            goPage(key) {
                this.$message.info(key);
            }
        }
    }
</script>

3、运行效果