解决Vue导航栏路由跳转，浏览器刷新后导航块高亮消失

最近前端项目上手没多久，就踩了一个小坑，一开始感觉还整挺好，随便点了点，，结果....

 手欠刷新了一下浏览器，就发现对应的导航块高亮消失

 这是怎么回事儿捏？代码如下 ：

<el-menu
          :default-active="onRoutes"  //根据返回路由的index 高亮
          class="el-menu-vertical-demo"
          background-color="#4a4d50"
          text-color="#fff"
          active-text-color="#00ffff"
          :collapse="isCollapse"
          :collapse-transition="false"
          router
        >
          <!-- 一级菜单 -->
          <el-menu-item
            v-for="menu in menuList" // 遍历 menuList
            :key="menu.path"
            :index="menu.path" // 用path作下标
          >
            <!-- 图标 根据对应的menu.id获取对应的图标 -->
            <i :class="iconsObject[menu.id]"></i>
            <!-- 模板区 -->
            <template slot="title">
              <span>{{ menu.menuname }}</span>
            </template>
            <!-- <el-menu-item>
            
            </el-menu-item> -->
          </el-menu-item>
        </el-menu>
      </el-aside>
      <!-- 主体 -->
      <el-main><router-view></router-view></el-main>
    </el-container>
  </el-container>
</template>

 
<script>
import { getMenuList } from "../api/home";
export default {
  data() {
    return {
      menuList: [
        { id: 1, menuname: "用户管理", path: "user" },
        { id: 2, menuname: "商品管理", path: "shop" },
        { id: 3, menuname: "订单管理", path: "order" },
        { id: 4, menuname: "数据统计", path: "data" },
      ],
      iconsObject: {
        1: "el-icon-s-custom",
        2: "el-icon-s-cooperation",
        3: "el-icon-s-order",
        4: "el-icon-s-data",
        5: "el-icon-setting",
      },
      // 是否折叠菜单
      isCollapse: false,
      // flag: "点我收起",
    };
  },
  computed: {
    // 动态返回对应的路由path
    onRoutes() {
      return this.$route.path;
    },
  },

找了半天发现，menuList中的 path 没有加 / ,修改后，问题解决

总结原因：由于 default-active 中 onRoutes计算属性返回的是带有 / 的path

而 index 绑定的是menuList中的path(无 / )，path不一致(判端不是同一个path)

导致浏览器刷新后，default-active无法根据对应path高亮显示

menuList: [
        { id: 1, menuname: "用户管理", path: "/user" },
        { id: 2, menuname: "商品管理", path: "/shop" },
        { id: 3, menuname: "订单管理", path: "/order" },
        { id: 4, menuname: "数据统计", path: "/data" },
      ],