el-menu点击跳转多层页面刷新保持当前选中状态的方法

• 问题描述:点击页面1的注册消息按钮跳转到页面2,左边的el-menu一直保持当前选中状态,且点击刷新时,页面也保持当前状态

  
  页面1

解决方案:

1.在配置路由的时候,设置meta属性,把同一el-menu-item下的页面设置成相同的值.也考虑过把name设置成相同的值,但是显然不行,浏览器会报路由名字相同的警告

 {
        path: "/companyinfo",
        name: "companyinfo",
        component: () =>
          import(
            /* webpackChunkName: "companyinfo" */ "../views/CompanyInfo.vue"
          ),
       // 重点在此
        meta: { name: "company" },
      },
      {
        path: "/comanyregister",
        name: "companyregister",
        component: () =>
          import(
            /* webpackChunkName: "comanyregister" */ "../views/CompanyRegisterInfo.vue"
          ),
       // 重点在此
        meta: { name: "company" },
      },

2.在home的el-menu中只需把default-active设置成$route.meta.name,这样就完美对应了

 <el-menu
          :default-active="$route.meta.name"
          class="el-menu-vertical-demo"
          active-text-color="#2fc7a0"
          unique-opened
          @open="handleOpen"
          @close="handleClose"
          router
        >
          <el-menu-item index="company" :route="{ path: '/companyinfo' }">
            <span slot="title">企业信息维护</span>
          </el-menu-item>
          <el-submenu index="2">
            <template slot="title">
              <span>项目管理</span>
            </template>
            <el-menu-item index="current" :route="{ path: '/currentproject' }"
              >当前项目</el-menu-item
            >
            <el-menu-item index="history" :route="{ path: '/historyproject' }"
              >历史项目</el-menu-item
            >
          </el-submenu>
        </el-menu>

结束