Vue-路由导航菜单栏的高亮设置

最新推荐文章于 2024-06-12 23:14:10 发布
最新推荐文章于 2024-06-12 23:14:10 发布
阅读量6.0k 收藏
点赞数
分类专栏： JavaScript 文章标签： 导航
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_21796899/article/details/78514198
版权

默认情况下，路由的导航菜单，会自动给当前菜单添加router-link-exact-active 和router-link-active 类。
我们可以通过 linkActiveClass 来修改 router-link-active 这个类名，
在路由规则配置中添加配置项linkActiveClass: ‘mui-active’，通过’mui-active’来自定义控制菜单栏切换样式

晨曦之光11
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue的导航栏功能
DFXVHG的博客
05-12 451
使用@mouseenter鼠标移入事件 和@mouseout鼠标移出事件 <style> ul{ background: red; display: inline-block; color: whitesmoke; font-size: 40px; } .b1{ background: blue; width: 400px; height: 400p.
vue 嵌套路由，router-link-active的问题
Missbelover的博客
11-17 1929
效果 在点击主路由的时候，会有一个active的样式 但是在点击了子路由之后： 一开始我是用vue里面router-link-exact-active来做的 在子路由点击的时候，要保证此时当前的激活路由还处于active状态，显然如果用router-link-exact-active 来做的话 ，就不能实现了。即在你点击子路由的时候，主路由的active样式就消失了， router-link-...
Vue实现导航栏菜单
10-14
主要为大家详细介绍了Vue实现导航栏菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue爬坑记:关于遇到侧边栏高亮的坑
webfullstack的博客
06-25 2461
写在前面:由于vue使用的还不怎么熟练,在设置不同的路由之间跳转需要设置高亮时卡住了,所以记录下遇到的问题. 遇到的问题 自己写的高亮class在页面刷新时失效,总是第一个高亮 使用vuex传需要高亮的index值时,使用$store.state.count值传递不到js里面去,只能在html里面用; 使用vueRouter中的router-link传值时,也是传递不到js里面去; 解决方法...
vue2动态路由实现
最新发布
weixin_60941411的博客
06-12 571
</el-menu>
vue中router菜单高亮
我的个人博客
05-21 1466
vue中使用router实现菜单高亮 因为之前一直是用点击控制class的方式写的，没有遇到问题，也没有bug。今天写的时候终于出现了bug，刷新页面高亮菜单为默认值，导致很久才能解决这个bug，记一次vue页面刷新高亮菜的为默认值的bug。 话不多说直接上代码 方法一： 在router中选中的router-link会默认添加样式 router-link-exact-active router-link-active 所以直接给这两个当中的一个添加高亮样式即可，router-link-exac
Vue-路由导航菜单栏的高亮设置方法
01-21
如下所示： 默认情况下，路由的导航菜单，会自动给当前菜单添加router-link-exact...以上这篇Vue-路由导航菜单栏的高亮设置方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
vue-router二级导航切换路由及高亮显示的实现方法
10-16
本篇文章将深入探讨如何在Vue Router中实现二级导航的切换路由以及高亮显示。 首先，我们要创建两个主要的导航页面，比如“发现”和“我的音乐”。在Vue中，我们可以创建两个单独的组件，如`Discover.vue`和`...
Vue结合路由配置递归实现菜单栏功能
11-20
Vue.js 结合路由配置实现递归菜单栏功能是一种常见的前端开发技术，主要用于构建动态的、层级结构的导航菜单。在本文中，我们将探讨如何利用Vue.js的组件化特性和Vue Router的路由配置来创建一个可扩展的递归菜单...
Vue 菜单栏点击切换单个class(高亮)的方法
10-18
在Vue.js中，实现菜单栏点击切换单个class（高亮）的功能是常见的需求，尤其是在构建具有导航功能的Web应用时。以下是一种简单而有效的方法： 首先，我们需要在Vue实例的数据属性中定义一个变量，用于存储当前选中...
vue动态生成路由菜单
qq_36566924的博客
11-23 3278
①router文件夹下放2个文件：index. js（放置基础的路由信息）和roleRoute. js（放置需要权限分配的路由） ②index.js文件如下： import Vue from ‘vue’ import Router from ‘vue-router’ Vue.use(Router) export const routerMap=[ {path:’/’,name:‘root’,redirect:‘login’}, {path:‘login’,name:‘login’,component:
Vue开发实例（九）动态路由实现左侧菜单导航
Daniel
03-03 2648
动态路由，防止超权限展示不属于自己的内容
使用Vue2实现后台管理系统动态路由和动态侧边菜单栏
weixin_62950011的博客
12-31 5998
后台管理菜单项模拟接口动态路由，动态路由，动态即不是写死的，是可变的。我们可以根据自己不同的需求加载不同的路由，做到不同的实现及页面的渲染。动态的路由存储可分为两种，一种是将路由存储到前端而是通过接口获得的，这时候我们要如何根据后台接口编写我们的路由呢。
vue3实现动态菜单和动态路由和刷新后白屏处理
bu_xiang_tutou的博客
03-12 6689
项目中，当每一个角色得到的界面不一致的时候，我们就不能使用静态菜单了，而是要从后端得到动态的菜单数据，然后动态的将菜单数据展示在界面上。除了在界面展示，也还要将界面的路由动态添加，在路由动态添加之后，你可能会出现刷新界面，界面变白的情况，页面刷新白屏其实是因为vuex引起的，由于刷新页面vuex数据会丢失，所以动态添加路由这一步也就失效了。这种情况我会在最后给一个处理方法。
vue实现动态路由菜单！！！
TangMonk的博客
11-28 1666
递归处理后端响应的菜单树，后依次通过addRoute方法往静态父路由，添加动态子路由，添加完使用el-menu渲染并添加router属性实现路由菜单模式。
使用vue-router会在地址栏自动添加/#/号
weixin_40667613的博客
08-01 4429
https://segmentfault.com/q/1010000009134004
Vue路由中的router-link-exact-active和router-link-active
热门推荐
zyz00000000的博客
03-21 1万+
1.router-link-exact-active和router-link-active这两个类名是Vue路由自带的 （1）router-link-exact-active 当路由到哪里时，该类名就添加到对应的路由标签上 比如：当点击About时，路由就跳转到About对应的页面 此时，看该路由标签的类名： （2） 当点击Community的子路由时，该类名就会到子路由上 ...
vue动态路由的学习和动态菜单的使用
weixin_42040328的博客
05-14 2145
动态路由 vue-router里面的配置 动态菜单权限
Vue3 根据路由动态生成Menu左侧菜单栏
好记性，不如烂键盘。
01-24 2157
根据路由动态生成Menu左侧菜单栏
vue路由导航栏怎么设置高亮效果
06-01
要设置 Vue 路由导航栏的高亮效果，可以使用 Vue Router 提供的 `router-link` 组件和 `router-link-active` 类。 首先，在 `router-link` 组件中添加 `exact-active-class` 属性和 `active-class` 属性，分别指定精确匹配时和模糊匹配时的高亮效果类名。例如： ```html <router-link to="/" exact-active-class="active" active-class="active">Home</router-link> <router-link to="/about" exact-active-class="active" active-class="active">About</router-link> ``` 然后，在样式表中定义 `active` 类的样式，例如： ```css .active { color: red; font-weight: bold; } ``` 这样，当路由切换到对应的页面时，`router-link` 组件就会自动添加 `active` 类，从而实现高亮效果。 注意：`router-link-active` 类是 Vue Router 2.x 版本中使用的类名，而在 3.x 版本中已经被废弃。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值