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

要实现NavMenu导航菜单选中状态的切换，可以利用vue-router和ElementUI提供的组件。

首先，在路由配置中，可以给每个路由对象添加一个meta属性，用来标记该路由是否处于被选中状态，例如：

const routes = [
  {
    path: '/home',
    component: Home,
    meta: {
      activeMenu: '/home'
    }
  },
  {
    path: '/about',
    component: About,
    meta: {
      activeMenu: '/about'
    }
  },
  //其他路由
]

然后，在NavMenu组件中，可以利用ElementUI提供的menu-item组件和router-link组件来实现菜单项和路由的绑定，例如：

<el-menu-item 
  v-for="item in menuList" 
  :key="item.path" 
  :index="item.path"
  :route="{path: item.path}"
  :class="{'is-active': item.path === activePath}"
>
  <i :class="item.icon"></i>
  <span slot="title">{{item.title}}</span>
</el-menu-item>

其中，menuList是一个包含菜单项信息的数组，activePath是当前选中的路由路径，可以在NavMenu组件中通过$route对象获取，例如：

data() {
  return {
    activePath: this.$route.path
  }
},
watch: {
  '$route.path'(newVal) {
    this.activePath = newVal
  }
}

最后，在NavMenu组件的样式中，可以添加一个is-active类来设置选中菜单项的样式，例如：

.el-menu-item.is-active {
  color: #409EFF;
  background-color: #f5f7fa;
}

这样，就可以实现NavMenu导航菜单选中状态的切换了。