Recently, WE used the menu menu in iView to build a new project with VUE-CLI3 and iView framework. It is not good to write according to the official website, because general projects dynamically obtain the menu list from the back end, so we need to modify the official website code slightly, the code is as follows:

Matters needing attention:

[1] Highlight part of the page of dynamic binding route jump

The Menu component has an active-name that reflects the current highlighting area, so you can dynamically bind active-name to highlight the area. The prerequisite is to set the name of the MenuItem binding to the name of the page route​

[2] Dynamic access to menu data, need to update the menu

     this.$nextTick((a)= > {
    	this.$refs.side_menu.updateOpened()
       	this.$refs.side_menu.updateActiveName()
     });Copy the code

Code:

<template>
  <div class="leftNav">
    <Menu ref="side_menu" theme="dark" accordion v-for="(menuItem, menuIndex) in menuList" :key="menuIndex" :active-name="$route.name">

      <! -- Expand without submenu -->
      <MenuItem v-if=! "" menuItem.children || menuItem.children.length==0" :key="menuIndex" :name="menuItem.to" :to="menuItem.to">
        <Icon :type="menuItem.icon" />
        <span>{{ menuItem.name }}</span>
      </MenuItem>

      <! -- Expand with submenu -->
      <Submenu v-else :name="menuIndex">
          <template slot="title">
              <Icon :type="menuItem.icon" />
              <span>{{menuItem.name}}</span>
          </template>
          <MenuItem  v-for="(item, index) in menuItem.children" :key="index" :name="item.to" :to="item.to">{{item.name}}</MenuItem>
      </Submenu>
    </Menu>
  </div> 
            
</template>
<script>
export default {
  data() {
    return {
      menuList: [{name: "Home page".to: "home".icon: "ios-archive-outline"
        },
        {
          name: "About".to: "about".icon: "ios-create-outline"
        },
        {
          name: "Menu Category 1".icon: "md-person".children: [{name: "User".to: "user"}]}, {name: "Menu Category 2".icon: "ios-copy".children: [{name: "Test".to: "test"}]}]}; }, created() {// I write static data first, which can be initialized by request to point to menuList.
    // This. MenuList = response.data;
    // Don't forget to update the menu
    // this.$nextTick(() => {
    //	this.$refs.side_menu.updateOpened()
    //	this.$refs.side_menu.updateActiveName()
    / /});}};</script>
<style lang="scss" scoped>/deep/ .ivu-menu-dark.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) { border-right: none; color: #fff; background: #2d8cf0 ! important; }</style>
Copy the code

Effect:

​


​