vue 菜单选中,菜单切换，直接浏览器输入地址菜单选中，路由切换的时候菜单选中，点击的时候菜单选中 电脑版发表于：2024/1/11 15:27 #### 页面 ``` <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里边监控了路由去调用了菜单选中的方法。其实这里一般情况下都不需要三种处理方式都留着，根据实际情况来把，都留着也不会有大问题，只是会有重复执行菜单选中方法的情况。
