vue项目怎样设置根据路由高亮对应的菜单项

最新推荐文章于 2023-12-19 21:35:33 发布
最新推荐文章于 2023-12-19 21:35:33 发布
阅读量5.3k 收藏 9
点赞数 6
分类专栏： js vue vue-router 文章标签： 根据路由高亮显示菜单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/woshidamimi0/article/details/98482701
版权
js 同时被 3 个专栏收录
68 篇文章 4 订阅
订阅专栏
vue
29 篇文章 0 订阅
订阅专栏
vue-router
1 篇文章 0 订阅
订阅专栏

高亮显示菜单是很常见的一个场景

首先，在router-link标签上绑定对应的路径

然后在css里面设置router-link-active类的样式即可切换路径的时候高亮对应的菜单


也可以在router路由数组里面设置meta信息，然后根据这个信息来判断是否高亮（这里可以循环生成菜单，不过我没有写）只是说一下思路

这样即可根据路由实现对应的菜单高亮了，我个人认为第二种比较灵活，如果菜单嵌套很多可以用第二种

woshidamimi0
关注
专栏目录
Vue 菜单栏点击切换单个class(高亮)的方法
10-18
今天小编就为大家分享一篇Vue 菜单栏点击切换单个class(高亮)的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue根据不同路由，使对应的点击的元素或菜单高亮显示
小白菜的博客
06-01 1112
监听路由变化的方法 <template> <div> <ul> <li v-for="(item,index) in menuList" :key="index" :class="{'active': isActive == index}" @click="handleClick(index)"> <router-link :to="item.path"> {{item.name}} </router-link&gt
vue 菜单高亮，多级菜单保持高亮
最新发布
qq_61869009的博客
12-19 834
监听路由变化判断要跳转的路由中是否存在childrenUrl，存在则表示他是多级路由拿到他的childrenUrl给vuex中的defaultActive。修改vuex中的值并使用sessionStorage做到持久化储存避免页面刷新菜单高亮失效。这个defaultActive放到vuex中方便后续操作。1.在创建路由的时候给子路由多增加一个参数用来判断。主要实现多级路由跳转后还想保持左侧菜单高亮。
vue 路由导航动态设置当前菜单的高亮状态(多级)
qq_39704803的博客
10-26 819
<template> <div class="menu-container clearf"> <ul class="menu-list common-container" > <li class=" " v-for="(item,index) in navs" :key="index" @click="routerLink(index, item.path)"> <di.
ant-design-vue中使用a-menu刷新页面后菜单仍选中高亮
csdnyp的博客
07-07 5073
ant-design-vue中使用a-menu刷新页面后菜单仍选中高亮
vue项目实现设置根据路由高亮对应的菜单项操作
11-19
在Vue项目中，实现根据路由高亮对应的菜单项是一项基本且重要的功能，它能帮助用户更好地理解当前所在页面的位置。通常有两种主要的方法来实现这一功能。 **方法一：基于`router-link`的`active-class`属性** Vue ...
Vue-路由导航菜单栏的高亮设置方法
08-27
在上述模板中，`<router-link>`组件将根据当前路由自动应用`mui-active`或`mui-exact-active`类，使得对应的菜单项高亮。 最后，确保你的菜单数据和路由定义是同步的。例如，如果菜单项是从服务器动态获取的，你...
vue-router二级导航切换路由及高亮显示的实现方法
12-09
Vue Router 是 Vue.js 的官方路由管理器，它让我们能够实现前端路由，使应用程序可以在不同的视图之间导航...通过配置路由、创建导航组件和定义样式，我们可以实现具有二级导航和高亮效果的交互式菜单，提高用户体验。
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
10-14
当用户点击这些菜单项时，对应的路由会被激活，同时`Menu`也会自动选中相应的菜单项，因为`selectedKeys`与当前路由匹配。 然而，当页面刷新时，Vue的状态不会自动保留，所以我们需要额外的手段来处理这个问题。在...
Vue-路由导航菜单栏的高亮设置
weixin_42206785的博客
12-07 2076
默认情况下，路由的导航菜单，会自动给当前菜单添加router-link-exact-active 和router-link-active 类。 我们可以通过 linkActiveClass 来修改 router-link-active 这个类名， 在路由规则配置中添加配置项linkActiveClass: ‘mui-active’，通过’mui-active’来自定义控制菜单栏切换样式 原文：ht...
Vue实现选中高亮显示
weixin_57144866的博客
04-11 857
activeIndex==0 //高亮的初始值。
代码模版-vue设置进入某个页面时该页面菜单item高亮
abcnull 的博客
07-29 387
比如说，左侧有众多菜单栏，当点击一个菜单栏，进入一个页面，要保证左侧此页面对应的菜单栏 item 是高亮的。
vue根据路由来显示高亮选项
weixin_43817709的博客
01-17 1501
在做导航栏的时候，总会有这样的需求，点哪一项哪一项就高亮显示，最近发现vue的一个ui库vant,已经有这样的效果了，就不用自己写css了。 <van-tabbar v-model="active"> <van-tabbar-item name="home" icon="home-o">标签</van-tabbar-item> <van-tabba...
在Vue中element-ui实现随hash改变响应菜单高亮
三口酥屋
03-12 1546
在Vue中element-ui实现随hash改变响应菜单高亮1. \中绑定属性default-active有时eslint会报错,按要求转为defaultActive2. 设置一个变量 activePath 来控制 default-active3. 在 mounted() 中加入 hash4. watch监控 $route 对象,因拿到的值带有\/,使用slice截断总结: 1. <el-menu>中绑定属性default-active有时eslint会报错,按要求转为defaultActive
Vue的输入url高亮菜单
Tel_17674647975的博客
09-24 447
初步学习Vue小技巧
Vue路由如何设置导航选中（高亮）
HELLO WORLD
05-26 4157
本文内容知识点比较简单，主要面向vue新手朋友们解答疑惑。vue前辈请忽略。 我自己学习vue的时候也有遇到过这个情况，看到一些新人朋友们在问，vue的路由怎么设置选中(高亮)呀？ 默认class是否可以不显示呀？ 请看下文
【Vue】不会还有人不知道vue路由(vue-router)怎么用吧?
wusandaofwy的博客
09-23 718
Vue路由 路由及工作原理 单页面应用SPA介绍 vue路由使用流程 路由模式 路由hash模式和history模式的区别 路由重定向 404重定向 vue路由跳转传参 vue动态路由匹配（声明式导航） vue路由的编程式导航 编程式导航传参 二级路由(嵌套路由) 路由导航守卫 使用导航守卫完成登录页面跳转 组件缓存keep-live 组件缓存基本使用 缓存指定组件 组件缓存勾子 路由比较混淆的地方
Vue获取当前路由地址以及当前页面的地址
m0_46627730的博客
07-11 5182
最近在做一个电商项目，其中搜索功能封装成一个组件用在多个路由组件中，用户通过输入相关商品名进行搜索，其中要实现的一个点就是：要是当前为商品页面则更新商品列表，若不是商品页面，则新开一个商品窗口。 实现： 1：用this.$router.path获取当前的路由地址，判断是否是商品路由地址，若是则更新数据即可，反之新开窗口 对vue新开窗口有疑惑的，可以查阅vue-新开窗口 注：我的商品路由地址为‘/path/main’ if(this.$router.path !== '/shop/main'){ le
Vue el-menu高亮设置及点击菜单项实现路由跳转
热门推荐
爱哭的毛毛虫的博客
11-13 1万+
el-menu相关知识记录一、el-menu菜单项高亮设置二、点击菜单项实现路由跳转 2021/11/13 知识点记录 一、el-menu菜单项高亮设置 el-menu高亮是通过:default-active来设置的，一般我们都是绑定$ route.path或者$route.name这两个值，因为他们基本上都是唯一的，对于高亮的判断这是通过将:default-active绑定的值与菜单项的唯一标识index比较来显示是否高亮，如果相同则高亮。 $ route.path对应当前页面路由的路径。 $ route
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值