首页
视频
资源
登录
原
vue 菜单选中,菜单切换,直接浏览器输入地址菜单选中,路由切换的时候菜单选中,点击的时候菜单选中
484
人阅读
2024/1/11 15:27
总访问:
577647
评论:
0
收藏:
0
手机
分类:
前端
#### 页面 ``` <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里边监控了路由去调用了菜单选中的方法。其实这里一般情况下都不需要三种处理方式都留着,根据实际情况来把,都留着也不会有大问题,只是会有重复执行菜单选中方法的情况。
欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}
TeachingNote
这一生多幸运赶上过你.
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
.net
36篇
后端
5篇
ORM
16篇
前端
48篇
随笔
13篇
移动开发
6篇
数据库
6篇
英语
3篇
rabbitmq
1篇
.net core
5篇
unity
1篇
k8s
1篇
云服务
1篇
DDD
1篇
网络
1篇
更多
mysql
1篇
python
2篇
docker
1篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术