vue 使用 elemen UI 导航菜单所遇到的问题

我们常常在开发 vue 项目中使用 elemen UI 开结合开发，但在单页面应用中，随着用户的操作而改变的状态，我们常常使用 VueX 来做状态管理，但是，如果用户刷新页面，之前的状态都会消失，那么，导航该如何准确给当前页面的导航按钮添加选中的样式呢？

直接上代码

<template>
  <el-menu
    router
    mode="horizontal"
    @select="selectMenu">
    <template v-for="(item, index) in navlist">
      <el-menu-item
        :index="item.path"
        :key="index"
        disabled>
        {{ item.name }}
      </el-menu-item>
    </template>
  </el-menu>
</template>

这样写的问题是，当用户刷新页面时，当前页面对应的导航并不会被添加选中样式，那该怎么办呢？

<template>
  <el-menu
    router
    :default-active="$route.path"
    mode="horizontal"
    @select="selectMenu">
    <template v-for="(item, index) in navlist">
      <el-menu-item
        :index="item.path"
        :key="index"
        disabled>
        {{ item.name }}
      </el-menu-item>
    </template>
  </el-menu>
</template>

当我们这样写，将当前路径时时绑定到导航上，就可以完美实现了.