element导航栏router跳转+++++++++element导航栏选中后刷新保持当前选中状态++++++element导航栏只能有一个子菜单的展开

一、导航栏跳转

1.在el-menu添加router
2.在el-menu添加:default-active=“activeIndex”
3.在data中添加activeIndex: ‘/’,
4.在el-menu-item中index="/path"
（源代码在后面）
例：


效果展示

代码如下：

             <el-menu
                router
                :default-active="activeIndex"
                class="el-menu-vertical-demo"
                @select="handleSelect"
              >
                <el-menu-item index="/">
                  <i class="el-icon-menu"></i>
                  <span slot="title">首页</span>
                </el-menu-item>
                <el-submenu index="2">
                  <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>入住信息</span>
                  </template>
                  <el-menu-item index="/occupantinformation"
                    >入住人员信息</el-menu-item
                  >
                </el-submenu>
              </el-menu>


 data() {
    return {
      activeIndex: '/',
    };
  },

二、导航栏选中后刷新保持当前选中状态
1.对路由进行监听 this.activeIndex= this.$route.path;
当路由地址发生变化时改变activeindex
例：

2.代码

  watch: {
    $route() {
      this.setCurrentRoute();
    },
  },
   methods: {
    setCurrentRoute() {
      this.activeIndex= this.$route.path;
    },
    }

完成！现在打开页面刷新也会保持当前选中状态！！！

三、只能有一个子菜单的展开

导航栏下拉菜单可能会同时下拉，两个子菜单一起打开，这样菜单会很长
例：

解决方法

在el-menu中添加unique-opened

              <el-menu
                router
                :default-active="activeIndex"
                class="el-menu-vertical-demo"
                @select="handleSelect"
                unique-opened
              >
              
              ...................
              ...................
              ...................
              
              </el-menu>

这样就可以只保持一个菜单打开了，打开一个，第二个就会被关闭！