vue的element的NavMenu导航菜单的注意点

1.渲染问题

后台返回的数据是这样的

menu_list: [{
        id: 1,
        name: '账号管理',
        icon: 'el-icon-place',
        children: [{
          id: '1-1',
          name: '快手',
          path:'/kuaishou'
        }, {
          id: '1-2',
          name: '百度',
          path:'/baidu'
        }]
      }, {
        id: 2,
        name: '账号管理',
        icon: 'el-icon-place'
}]

<el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose">
      //有children渲染这块
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>导航一</span>
        </template>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
      </el-submenu>
      //没有children渲染这块
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">导航二</span>
      </el-menu-item>
      
    </el-menu>

从这标签可以看出，有二级菜单的话，标签会不一样，所以需要判断一下

<el-menu
    default-active="current_url" 
    class="el-menu-vertical-demo"
    @open="handleOpen"
    @close="handleClose">
        <template v-for="(item,i) in menu_list"> //注意这里不能写:key="i"
        	//有子标签的渲染
        	//判断children
        	//这里的index接收的是字符串，所以要转换一下
            <el-submenu v-if="item.children" :index="item.path || item.id.toString()"  :key="i"> // :key="唯一标识"写到这里
                <template slot="title">
                    <i :class="item.icon"></i>
                    <span>{{item.name}}</span>
                </template>
                //子标签渲染 注意名字不能重复（item1，i1）
                <el-menu-item :index="item1.path || item1.id.toString()" v-for="(item1,i1) in item.children" :key="i1">
                    {{item1.name}}
                </el-menu-item>
            </el-submenu>
            //没有子标签渲染
            //这里的index接收的是字符串，所以要转换一下
            <el-menu-item v-else :index="item.path || item.id.toString()" :key="i"> :key="唯一标识"写到这里
                <i :class="item.icon"></i>
                <span slot="title">{{item.name}}</span>
            </el-menu-item>
        </template>
</el-menu>

data () {
    return {
    //页面刷新自动展开之前页面
      current_url: '/index'
    }
  },

mounted () {
    if (this.$route.path.indexOf('/') !== -1) {
      this.current_url = this.$route.path
    }
  },

1. template 标签不能写 :key=“i” ，把:key="唯一标识"写到他下一级标签里
2. 子标签渲染（item1，i1）渲染的名字不能一样
3. el-menu-item 和el-submenu 的index接收的是字符串，所以要item.id.toString() 转换一下
4. 浏览器刷新的时候，把默认的url改成当前的url
5. 如果有三级菜单可以按照上面这种方式判断一下，进行渲染