routerLinkActive

最新推荐文章于 2023-11-07 16:45:36 发布
最新推荐文章于 2023-11-07 16:45:36 发布
阅读量156 收藏
点赞数
分类专栏： Angular 文章标签： angular
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Damien_J_Scott/article/details/115750223
版权

刚刚有个新同事问我这个具体有什么用,给他解释了之后顺便记录下.

https://angular.cn/api/router/RouterLinkActive#description

在这里插入图片描述
简而言之,路由路径匹配之后,为dom添加设定的class,若添加[routerLinkActiveOptions]="{exact:
true}",则是精确匹配路由

Damien_J
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 嵌套路由，router-link-active的问题
Missbelover的博客
11-17 1879
效果 在点击主路由的时候，会有一个active的样式 但是在点击了子路由之后： 一开始我是用vue里面router-link-exact-active来做的 在子路由点击的时候，要保证此时当前的激活路由还处于active状态，显然如果用router-link-exact-active 来做的话 ，就不能实现了。即在你点击子路由的时候，主路由的active样式就消失了， router-link-...
详解angular路由高亮之RouterLinkActive
12-12
路由高亮是什么？有什么好处？ 当你在做一个后台管理系统，左边是一排路由导航，点击可以进入不同的页面，那么这个路由所在dom元素会添加上... selector: '[routerLinkActive]', exportAs: 'routerLinkActive' }) cla
Vue Router的基本使用、router-link以及router-link-active
drhnb的博客
07-10 4415
在Vue中，可以使用Vue Router来实现路由功能。Vue Router是Vue.js官方提供的一个插件，用于实现前端的路由管理。 使用Vue Router可以将不同的页面映射到对应的URL路径，并通过URL的变化在不刷新页面的情况下展示不同的内容。这样可以实现单页应用（SPA）的效果，让用户在页面之间进行无刷新的导航操作。
vue-router中的router-link的active-class
weixin_34032779的博客
01-29 1704
在vue-router中要使用选中样式的方法有两种： 1、直接在路由js文件中配置linkActiveClass 2、在router-link中写入active-class 问题：如果就这样，那么会出现一个问题，不管跳转到哪里，跳转到根目录的那个连接（to="/"） 始终都会有选中样式 　　为什么会这样呢？查阅文档：https://route...
vue-router里面的linkActiveClass用法
wushen的博客
08-19 1159
每次路由切换成功进入激活状态 在点击导航栏的时候，让被点击的那一个有背景色，其他的没有背景色？ 如何做？ 在路由里面设置 linkActiveClass: ‘is-active’, const router = new VueRouter({ routes, linkActiveClass: 'is-active' }); 然后在css里面设置 .is-active{ background:red; } 这样被点击激活的时候就会被加上is-active这个class了。注意如果没
Vue默认路由的router-link-active类使用注意点
一枚小趴菜(´▽`)ﾉ
03-25 2654
琢磨了好久的问题，终于解决了，泪目( Ĭ ^ Ĭ )
router-link-active
菜鸟的博客
02-16 5301
组件支持用户在具有路由功能的应用中（点击）导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的 标签，可以通过配置 tag 属性生成别的标签.。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名，就是router-link-active，我们就可在a标签被点击时，给a标签添加颜色或背景 如果你觉得router-link-active这个名字过长时，你可以在main...
routerLinkActive指令的妙用
weixin_39150852的博客
10-28 3111
routerLinkActive指令在路由激活时添加样式class 采用路由高亮： 当路由被激活时允许你添加一个class在你添加路由的dom元素上，只有url变化时才会移除此样式。 父路由链接激活 默认情况下，当路由为链接的父路由或者完全匹配链接，链接都会认为是激活的状态。 <a routerLink="/a/b" routerLinkActive="active">B链接</...
router-link-active 与 router-link-exact-active 区别
OJNBO_1的博客
03-12 648
router-link-active 与 router-link-exact-active 区别
解决vue-router-active无效问题
黑猫几绛的博客
05-24 2168
解决vue-router active-class无效问题 在自制tabBar中遇到了这些问题： （1）设置的样式中，path为'/'的icon始终被设置了active样式 解决办法: 由于router-link to的每个路由首部都存在'/'，因此都可以激活默认路由'/'，这也是为什么当path为'/'的时候始终有active样式，甚至出现了当点击其他tab按键时，出现了两个active样式。 在<router-linkto="/" >加上exact 属性 表示只有在地址为 /...
angular2路由之routerLinkActive指令【推荐】
01-19
angular2的routerLinkActive指令在路由激活时添加样式class .red{ color: red; } <a>login 当url是user或者/user/login的时候，a标签将会被加上classred。当url变化为别的时，class将会被移除。 如何添加两个class...
paises-app-practica-angular:Procecto depráctica，Donde practique Angular，Viendo las rut​​as con RouterRoute y和RouterLinkActive，uso del deobunce时间，输入和输出，consumo de api，tipado de datos，creando un menu de unaaplicación，uso del ngClass和css con condic
04-02
PaisesApp 该项目是使用版本11.0.2生成的。 开发服务器 为开发服务器运行ng serve 。... 如果您更改任何源文件，该应用程序将自动重新加载。 代码脚手架 运行ng generate component component-name生成一个新的组件。...
vue写footer导航，点击哪个让哪个变色并路由跳转（router-link-active的作用）以及vue路由的重定向。。
我只是个很菜的前端
09-01 2385
vue写footer导航，让其点击哪个让哪个的颜色变成红色（router-link-active的作用）。 vue footer 路由跳转并变色
Vue路由(router-link)——高亮、动态传参
最新发布
m0_53951384的博客
11-07 2128
router-link的两个高亮类名 太长了，我们希望能定制怎么办如何自定义router-link的两个高亮类名声明式导航跳转时, 有几种方式传值给路由页面？查询参数传参（多个参数）动态路由传参（一个参数，优雅简洁）
router-link-active使用
安之ccy的博客
05-18 2621
路由切换时，选中哪个路由，这个路由就被激活，当前页面所有与此路由匹配的链接（父级/子级）都会被加上这个class：router-link-active，绑定的css样式也就生效了 与exact（严格模式）属性配合使用，只匹配被选中的那个链接，相关的链接不会被匹配到 <template> <nav> <ul> <li><router-link to="/" exact>博客</router-lin
vue-router-link-active的作用
前端_李嘉豪
05-14 1251
如图所示：我们跳转至对应页面就显示选中状态 我们只需要定义.router-link-active的样式即可改变选中状态 以上就实现了我们router-link-active给选中路由组件添加选中样式 喜欢上方小程序,需要源码的,私信小编留下邮箱。 ...
Vue中router-link介绍
热门推荐
杨春建的博客
11-06 9万+
原文地址：http://router.vuejs.org/zh-cn/api/router-link.html 组件支持用户在具有路由功能的应用中（点击）导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的 标签，可以通过配置 tag 属性生成别的标签.。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。 比起写死的 会好一些，理由如下
BREAKING CHANGE: webpack ＜ 5 used to include polyfills for node.js core modules by default
Damien_J_Scott的博客
12-05 3955
升级项目使用外部包时报错，查了下解决方案，记录下 https://web03.cn/blog/263 我根据我使用的的情况具体了下方案，我是使用jhipster的，所以具体如下。 首先 npm install node-polyfill-webpack-plugin 然后修改webpack.custom.js const NodePolyfillPlugin = require('node-polyfill-webpack-plugin') module.exports = ...
routerlink active-class
08-31
<a routerLink="/home" routerLinkActive="active">Home <a routerLink="/about" routerLinkActive="active">About <a routerLink="/contact" routerLinkActive="active">Contact ``` 在上述代码中，当路由为 `...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值