vue 菜单选中,菜单切换，直接浏览器输入地址菜单选中，路由切换的时候菜单选中，点击的时候菜单选中

页面

<div id="usersubmenu" class="menuwapper">
  <div class="menuitem" href="/user/index/term-report" @click="jump($event)">学期报告</div>
  <div class="menuitem" href="/user/index/myfeedback" @click="jump($event)">我的反馈</div>
  <div class="menuitem" href="/user/index/my-evaluate" @click="jump($event)">我的评估</div>
  <div class="menuitem" href="/user/index/mylabroom" @click="jump($event)">我的实验</div>
  <div class="menuitem" href="/user/index/my-prodedu" @click="jump($event)">我的产教</div>
  <div class="menuitem" href="/user/index/my-exam" @click="jump($event)">我的考试</div>
  <div class="menuitem" href="/user/index/user-info" @click="jump($event)">个人信息</div>
  <div class="menuitem" href="/user/index/information_notification" @click="jump($event)">信息通知</div>
</div>

js

watch: {
  // 监听路由变化的时候在进行菜单选中
  $route(to, from) {
    // console.log('路由发送变化了导航页to', to)
    this.choiseMenu(to.path)
  }
},
mounted() {
  const routePath = this.$route.path
  // console.log("看看需要选中菜单的路由",routePath)
  this.choiseMenu(routePath)
},
methods: {
  // 菜单选中，可以跳转的路由在判断应该选中的菜单
  choiseMenu(routePath) {
    const childNodes = document.getElementById('usersubmenu').getElementsByTagName('div')
    for (let index = 0; index < childNodes.length; index++) {
      const element = childNodes[index]
      console.log(element.getAttribute('href'))
      if (routePath === element.getAttribute('href')) {
        element.className = 'menuitem menuitemfocus'
      } else {
        element.className = 'menuitem'
      }
    }
  },
  jump(event) {
    const href = event.currentTarget.getAttribute('href')
    // 菜单选中
    this.choiseMenu(href)
    this.$router.push(href)
  }
}

这里处理了三种情况下的菜单切换选中，一点是点击的时候选中，调用jump方法的时候手动调用了一下this.choiseMenu(href)这样可以保障点击的时候选中。然后就是在mounted去调用了一下这样可以在直接浏览器刷新或者打开的时候选中。还有就是watch里边监控了路由去调用了菜单选中的方法。其实这里一般情况下都不需要三种处理方式都留着，根据实际情况来把，都留着也不会有大问题，只是会有重复执行菜单选中方法的情况。