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
关注
  • 6
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Vue 菜单栏点击切换单个class(高亮)的方法
10-18
今天小编就为大家分享一篇Vue 菜单栏点击切换单个class(高亮)的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue根据不同路由，使对应的点击的元素或菜单高亮显示
小白菜的博客
06-01 1111
监听路由变化的方法 <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 824
监听路由变化判断要跳转的路由中是否存在childrenUrl，存在则表示他是多级路由拿到他的childrenUrl给vuex中的defaultActive。修改vuex中的值并使用sessionStorage做到持久化储存避免页面刷新菜单高亮失效。这个defaultActive放到vuex中方便后续操作。1.在创建路由的时候给子路由多增加一个参数用来判断。主要实现多级路由跳转后还想保持左侧菜单高亮。
vue 路由导航动态设置当前菜单的高亮状态(多级)
qq_39704803的博客
10-26 818
<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 5058
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 2073
默认情况下，路由的导航菜单，会自动给当前菜单添加router-link-exact-active 和router-link-active 类。 我们可以通过 linkActiveClass 来修改 router-link-active 这个类名， 在路由规则配置中添加配置项linkActiveClass: ‘mui-active’，通过’mui-active’来自定义控制菜单栏切换样式 原文：ht...
Vue实现选中高亮显示
weixin_57144866的博客
04-11 855
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 1542
在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 4152
本文内容知识点比较简单，主要面向vue新手朋友们解答疑惑。vue前辈请忽略。 我自己学习vue的时候也有遇到过这个情况，看到一些新人朋友们在问，vue的路由怎么设置选中(高亮)呀？ 默认class是否可以不显示呀？ 请看下文
Vue知识整理，专题之路由：4、路由redirect重定向的使用-设置默认页面、设置选中路由高亮的两种方式
热门推荐
鲁迷那的专栏—坚持实践后再写出来！
03-28 1万+
一、前言 上一节我们介绍了路由-路由（vue-router）的基本使用、router-link的使用，详细可参考博文：原创Vue笔记整理，专题之路由：3、路由-路由（vue-router）的基本使用、router-link的使用这篇文章我们将介绍：路由-路由redirect重定向的使用、设置选中路由高亮的两种方式 二、路由-路由redirect重定向的使用 1、设置默认页面 我们以上篇......
vue动态菜单及tag切换
xy19950125的博客
11-12 6041
刚刚接触项目的小伙伴 几乎都接触不到这一块的 因为入职 公司要么有骨干 要么是现有项目维护 所以 对于动态菜单 很好奇 今天带着小伙伴们一起来看看吧 可能有些人接触过 只是看看别人写的代码 觉得都没有问题没有实际动手去做过 这就应对了那句 “看花容易绣花难” 其实我开始的时候 也是这种心理 直到我自己动手的时候 发现里面有很多坑 如果不涉及到tag的切换 估计看看element官网就知道了 关键就是带有tag切换 导致很多小伙伴无从下手 现在很多公司的项目都是基...
vue elementui menu导航菜单根据路由变化选中对应项
hyupeng1006的博客
10-17 3067
1、刷新页面，导航菜单选中项恢复成默认设置 2、点击页面里的链接跳转到其它页面，但是导航菜单不会自动选中当前项
Vue el-menu高亮设置及点击菜单项实现路由跳转
07-17
Vue的el-menu组件可以通过设置`default-active`属性来实现高亮当前选中的菜单项，而实现点击菜单项跳转路由可以通过设置`router`属性和使用`router-link`组件来实现。 首先，设置el-menu组件的`default-active`属性，将其绑定到Vue实例中的一个data属性，例如`activeMenu`： ```html <template> <div> <el-menu :default-active="activeMenu"> <el-menu-item index="/home">首页</el-menu-item> <el-menu-item index="/about">关于</el-menu-item> <el-menu-item index="/contact">联系我们</el-menu-item> </el-menu> <router-view></router-view> </div> </template> <script> export default { data() { return { activeMenu: '/home' // 默认选中首页菜单项 } } } </script> ``` 然后，在路由配置中，使用Vue Router的`router-link`组件来实现点击菜单项跳转路由。在每个菜单项上使用`router-link`组件，将其绑定到相应的路由路径： ```html <template> <div> <el-menu :default-active="activeMenu"> <el-menu-item index="/home"> <router-link to="/home">首页</router-link> </el-menu-item> <el-menu-item index="/about"> <router-link to="/about">关于</router-link> </el-menu-item> <el-menu-item index="/contact"> <router-link to="/contact">联系我们</router-link> </el-menu-item> </el-menu> <router-view></router-view> </div> </template> ``` 这样，点击菜单项时会根据`router-link`中的`to`属性自动跳转到对应的路由，并且el-menu组件会根据当前路由的路径自动高亮对应的菜单项。 请注意，以上代码中的el-menu和router-view是使用了Element UI库和Vue Router插件，你需要在项目中引入并正确配置它们。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值