vue-router + ElementUI实现NavMenu 导航菜单 选中状态的切换

问题一：进入首页后，不能将主路径和子路径关联起来

发现首页进入之后没有到任何一个页面切换
只有点击首页才能出现信息

贴上代码：

<template>
  <div class="home">
    <div class="Top">
      <div style="float: right;">
        <a style="color: white">● 登录</a>
        <a style="color: white;margin-left: 20px;margin-right: 20px">● 注册</a>
      </div>
      <img src="../assets/top.png" alt="" style="width: 100%;" />
    </div>

    <!--    菜单列表-->
    <div class="content">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        router
      >
        <el-menu-item index="1" style="width: 15%"><i class="el-icon-s-home"></i>首页</el-menu-item>
        <el-menu-item index="2" style="width: 16%"><i class="el-icon-s-flag"></i>实验目的</el-menu-item>
        <el-menu-item index="3" style="width: 17%"><i class="el-icon-s-order"></i>实验原理</el-menu-item>
        <el-menu-item index="4" style="width: 17%"><i class="el-icon-s-unfold"></i>步骤与方法</el-menu-item>
        <el-menu-item index="5" style="width: 17%"><i class="el-icon-s-claim"></i>考核要求</el-menu-item>
        <el-menu-item index="6" style="width: 17%"><i class="el-icon-phone"></i>联系我们</el-menu-item>
      </el-menu>
      <div style="height: 100px"></div>
      <router-view></router-view>

    </div>
  </div>
</template>

问题二：如果刷新前路径是 /2 则刷新后路径还是 /2 ,但是下面的菜单却是首页

刷新前：

刷新后：

因此想个方法把路径和菜单切换联系起来，实现导航栏和页面的同时变换。

路径前面一定要加“/”才能同步起来，第一个只写 / 可以和首页关联