router-link 设置链接激活时使用的 CSS 高亮

最新推荐文章于 2024-08-02 17:03:03 发布
最新推荐文章于 2024-08-02 17:03:03 发布
阅读量7.7k 收藏 3
点赞数 2
分类专栏： VUE 文章标签： tag 路由高亮 router-lin active
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/feifanzhuli/article/details/78259527
版权
本文介绍了如何设置`router-link`在激活时使用的CSS高亮类名，包括默认值`router-link-active`和如何通过`linkActiveClass`属性进行自定义。此外，还提到了`tag`属性用于指定链接的HTML标签，并可以结合CSS进行样式定制。
摘要由CSDN通过智能技术生成

  • active-class

  • 类型: string

  • 默认值: “router-link-active”

设置 链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置。

HTML:

<div class="sidebar">
	<router-link
了解本专栏 订阅专栏 解锁全文 超级会员免费看
爱睡的虫虫
关注
专栏目录
订阅专栏
Vue-路由导航菜单栏的高亮设置方法
08-27
首先，Vue Router在默认情况下会为激活的菜单项添加`router-link-exact-active`和`router-link-active`两个CSS类。这两个类名可以作为样式选择器来设置高亮效果。当路由匹配时，`router-link-active`会被应用，而`...
vue-router-link选择样式设置
wenfu814的博客
08-27 9631
第一种：在router-link组件上 添加属性 active-class=‘ative’ 在css中设置 .actve样式即可 第二种 在css中写样式 router-link-exact-active <template> <div id="app"> <div class="nav"> <router-link to='/home'>首页</router-link> <router-link to='/abou
router-link样式设置
qq_59305682的博客
05-27 3446
因为router-link是由a来实现的，直接在style中写 a{ text-decoration: none; color:#333; font-family:sans-serif; font-size: 12px; }
router-link组件中的属性——active-class
最新发布
2201_75773271的博客
08-02 508
因为to="/" 引起的， active-class选择样式时根据路由中的路径去匹配， 然后显示， 例如在my页面中， 路由为localhost:8081/#/my，那么to="/”和to="/my"都可以匹配到， 所 有都会激活选中样式。
声明式导航＜router-link＞：解决a标签自带的默认样式
YY的博客
11-30 4322
声明式导航原理
前端应用_Vue_两种方法 设置 router-link 样式.
热门推荐
上海 彭彭
08-17 1万+
当我们点击 展示相应组建， 标签会加个class 属性，如图， 如果想高亮就需要 重写这个样式 <style> .router-link-active{ background-color: green; font-size: larger; color: aliceblue } </style> 我们也可以自定义一下， 在 rou...
Vue如何定义router-link的颜色样式
weixin_54048131的博客
08-05 1779
里面xxx的内容颜色都固定了，style样式改成：样式改不了。这样就可以修改样式了。
vue-router二级导航切换路由及高亮显示的实现方法
10-16
我们可以使用`v-for`循环遍历数据源，创建`<router-link>`组件来实现导航。同时，我们可以通过绑定`class`属性来控制高亮显示： ```html <!-- Guide.vue --> <ul class="nav nav-pills main-nav"> v-for="...
react-router中Link/的属性详解
11-29
- **activeStyle**：与`activeClassName`类似，当链接是活动状态时，`activeStyle`属性允许你设置一组CSS样式。这些样式会应用到`Link`组件的渲染结果上。例如，`activeStyle={{ color: 'red' }}`会让链接文字变红。...
Vue-router学习笔记
01-27
6. **带有自动激活的CSS class的链接**：通过`router-link`组件，可以自动为当前活动的路由添加CSS类，方便进行视觉上的高亮显示。 7. **HTML5历史模式或hash模式**：支持现代浏览器的HTML5 History API，也可以...
vue项目实现设置根据路由高亮对应的菜单项操作
11-19
当路由匹配到当前激活的路线时，Vue Router 会自动给`<router-link>`添加一个`router-link-active`类。因此，我们可以在CSS中定义这个类的样式，以实现菜单项的高亮效果。例如： ```html <router-link to="/home" ...
vue-router为激活的路由设置样式操作
11-20
1.首先先写好类名 2.在router里的js文件中添加 linkActiveClass:’active’ 补充知识：记录vue遇到问题，子页面没有router-link对应导航栏激活样式 如下所示： li>基础检索 data () { return { imgUrl, linkBoolean:false } }, created(){ if(this.$route.path == "/sto
如何修改router-link的默认样式
CSDNchaxundaima的博客
12-14 8357
如何修改router-link的默认样式 router-link默认样式为蓝色，它的背后是a标签，设置样式时推荐设置它的父元素下的a标签，然后设置样式比如 <div> <router-link to="">去登陆页面</router-link> </div> <style scoped> div>a{ background-color:red; } </style> 这样其他地方用到的router-link设置样式时不
修改router-link样式
m0_67796383的博客
12-13 1328
1.<router-link to="/hse"></router-link> 去掉下划线并改变字体颜色为白色。
设置router-link样式-使用a
Queen_sy的博客
04-18 497
有router-link 设置样式就用a就可以。核心代码（ps a前面没有.）设置样式图一变成图二。
Vue路由(router-link)——高亮、动态传参
m0_53951384的博客
11-07 4552
router-link的两个高亮类名 太长了，我们希望能定制怎么办如何自定义router-link的两个高亮类名声明式导航跳转时, 有几种方式传值给路由页面？查询参数传参（多个参数）动态路由传参（一个参数，优雅简洁）
看完必会router-link标签的激活样式
qq_49278026的博客
05-11 1975
router-link标签激活样式、hover的细节处理
router-link去除默认蓝字下划线并设置颜色高亮
m0_65753088的博客
04-29 2966
router-link样式
router-link常用属性
秋来九月八
11-05 2511
totag属性replace属性native修饰符active-class属性appendeventexactrouter-link 是 Vue Router 提供的用于导航的组件，它可以用来创建链接到不同路由的链接。
router-link点击切换高亮
09-17
使用router-link可以通过设置active-class属性来实现路由切换时对应文字高亮的效果。在router-link标签上添加active-class属性，并为其指定一个class名，然后在样式表中设置该class名的样式，即可实现高亮效果。 ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值