Vue默认路由的router-link-active类使用注意点

已于 2022-03-25 02:33:07 修改
阅读量2.6k 收藏
点赞数
文章标签： 前端 vue.js
于 2022-03-25 02:10:53 首次发布
(´▽`)ﾉ
本文链接：https://blog.csdn.net/w1311004532/article/details/123726010
版权

结论：注意点击子路由的时候，给子路由添加router-link-active类时，父路由也有router-link-active类（这里就要谨慎默认路由的使用）

起因：在一个菜单列表，想要一点开页面就显示用户管理

经过：于是给这个用户管理组件的路由规则path设置的默认路由，并用vue自带的router-link-active类名写好了router-link标签选中的时样式

结果：点其他router-link标签时，用户管理栏依旧样式处于选中状态！！

原因猜测：是由于用的默认路由，router-link-active直接把默认路由当成母路由，那么点击子路由的时候，给子路由添加router-link-active类时，母路由也有router-link-active类。

解决办法：不使用默认路由（虽然能偷点懒），使用路由重定向！！方可解决了此问题

 

tingkeiii
关注
  • 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-...
解决vue-router 二级导航默认选中某一选项的问题
12-13
上面的判断的意思是：如果你点击某一个选项把这个index传过去，activeName等于那一个传过来的index(index是遍历出来的数据如:1,2,3,4,5),就显示该个active或者index==pid，pid默认为0，所以index==0,就是默认第一个...
vue router-link 默认a标签去除下划线的实现
01-18
我就废话不多说了，大家还是直接看例子吧~ .router-link-active{ text-decoration: none; } vue的router-link默认的a标签点击会有一个阴影 补充知识：vue-router更改router-link点击时样式 默认类：router-link-active：可以通过在样式表中重新定义 基类：linkActiveClass：在创建路由时进行全局配置，linkActiveClass：/配置自定义类/ 以上这篇vue router-link 默认a标签去除下划线的实现就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网
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
Vue路由的两种模式：hash、history
最新发布
alive_new的博客
03-24 311
Vue.js提供了两种常见的路由模式，即Hash模式和History模式。
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写footer导航，点击哪个让哪个变色并路由跳转（router-link-active的作用）以及vue路由的重定向。。
我只是个很菜的前端
09-01 2385
vue写footer导航，让其点击哪个让哪个的颜色变成红色（router-link-active的作用）。 vue footer 路由跳转并变色
router-link-active
菜鸟的博客
02-16 5301
组件支持用户在具有路由功能的应用中（点击）导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的 标签，可以通过配置 tag 属性生成别的标签.。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名，就是router-link-active，我们就可在a标签被点击时，给a标签添加颜色或背景 如果你觉得router-link-active这个名字过长时，你可以在main...
Vue Router的基本使用、router-link以及router-link-active
drhnb的博客
07-10 4415
在Vue中，可以使用Vue Router来实现路由功能。Vue Router是Vue.js官方提供的一个插件，用于实现前端的路由管理。 使用Vue Router可以将不同的页面映射到对应的URL路径，并通过URL的变化在不刷新页面的情况下展示不同的内容。这样可以实现单页应用（SPA）的效果，让用户在页面之间进行无刷新的导航操作。
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 区别
router-link-active使用
安之ccy的博客
05-18 2621
路由切换时，选中哪个路由，这个路由就被激活，当前页面所有与此路由匹配的链接（父级/子级）都会被加上这个class：router-link-active，绑定的css样式也就生效了 与exact（严格模式）属性配合使用，只匹配被选中的那个链接，相关的链接不会被匹配到 <template> <nav> <ul> <li><router-link to="/" exact>博客</router-lin
VueJs路由跳转——vue-router的使用详解
11-26
对于单页应用，官方提供了vue-router进行路由跳转的处理，本篇主要也是基于其官方文档写作而成。 安装 基于传统，我更喜欢采用npm包的形式进行安装。 npm install vue-router --save 当然，官方采用了多种方式进行...
使用vue-router为每个路由配置各自的title
12-10
传统方法 以前在单页面路由中，就只能在html文件中定一个固定的网站的title。如果想要动态的去修改，需要使用如下的方法。 document.title = '这是一个标题';... linkExactActiveClass: 'exact-active-link'
vue中的router-link linkActiveClass属性
Little_Flower的博客
03-07 6369
在路由中配置linkActiveClass属性 export default new Router({ routes: [ { path: '/', name: 'HolleWorld', component: HolleWorld } ], linkActiveClass: 'active' // active为路由激活时...
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了。注意如果没
router-link标签的选中激活导航router-link-active
斗师——Ace
02-27 7732
添加小程序，兑换各种视频教程/数据资源。 router-link: 其中tag='div'表示router-link为div标签 <template v-for="(item,index) in arr" v-if="arr.length>0"> <router-link tag="div" class="tab_item fle...
Vue路由(router-link)——高亮、动态传参
m0_53951384的博客
11-07 2128
router-link的两个高亮类名 太长了，我们希望能定制怎么办如何自定义router-link的两个高亮类名声明式导航跳转时, 有几种方式传值给路由页面？查询参数传参（多个参数）动态路由传参（一个参数，优雅简洁）
router-link常用属性
秋来九月八
11-05 2165
totag属性replace属性native修饰符active-class属性appendeventexactrouter-link 是 Vue Router 提供的用于导航的组件，它可以用来创建链接到不同路由的链接。
vue2路由 router-link
09-21
router-link是Vue2中的一个组件，用于在页面中创建链接并实现路由导航。它是基于Vue Router实现的，可以通过设置不同的属性来配置链接的行为和样式。 router-link的tag属性用于指定渲染为哪种HTML标签，默认为a标签。通过设置tag属性，你可以将链接渲染为其他标签，比如button或div等。 router-link的replace属性用于指定是否在导航时替换历史记录，默认为false。当replace为true时，点击链接进行导航时，将直接替换当前的历史记录，而不会添加新的历史记录。 router-link的active-class属性用于指定当前激活链接的CSS类名。当对应的路由处于活动状态时，该类名将会被添加到链接上，让你可以为激活链接设置不同的样式。 修改router-link的router-link-active属性名称可以通过在Vue Router的配置中修改linkActiveClass字段来实现。默认情况下，激活链接会添加router-link-active类名，你可以通过修改linkActiveClass字段来指定其他的类名。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值