navmenu导航菜单

<template>
  <el-container class="home-container">
        <div @click="toggleCollapse">|||div>
        
        <el-menu
          background-color="#333744"
          text-color="#fff"
          active-text-color="#409EFF"
          unique-opened
          :collapse="isCollapse"
          :collapse-transition="false"
          router
          :default-active="$route.path"
        >
          
          <el-submenu
            :index="item.id + ''"
            v-for="item in menulist"
            :key="item.id"
          >
            
            <template slot="title">
              
              <i :class="iconsObj[item.id]">i>
              
              <span>{
    { item.authName }}span>
            template>

            
            <el-menu-item
              :index="'/' + subItem.path"
              v-for="subItem in item.children"
              :key="subItem.id"
            >
              <template slot="title">
                
                <i class="el-icon-menu">i>
                
                <span>{
    { subItem.authName }}span>
              template>
            el-menu-item>
          el-submenu>
        el-menu>
  el-container>
template>

<script>
// 点击按钮，切换菜单的折叠与展开
    toggleCollapse() {
      
      this.isCollapse = !this.isCollapse
    },
script>

解决element-ui中el-menu组件作为vue-router模式在刷新页面后default-active属性与当前路由页面不一致问题的方法

解决办法是给menu的default-active绑定route.path
形如：

每次渲染menu都会读当前path 设置为default-active