vue 中的vue-router路由选中添加router-link-exact-active类名

最新推荐文章于 2024-07-17 14:30:58 发布
原创 最新推荐文章于 2024-07-17 14:30:58 发布 · 793 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种使用CSS为路由器链接设置活动状态样式的技巧。通过`.router-link-active`和`.router-link-exact-active`选择器，可以分别为部分匹配和完全匹配的活动链接应用不同的边框样式。 
 .router-link-active {
      border-bottom: 4px solid blue;
    }
    .router-link-exact-active {
      border-bottom: 4px solid red;
vue 嵌套路由，router-link-active的问题
Missbelover的博客
11-17 2124
效果 在点击主路由的时候，会有一个active的样式 但是在点击了子路由之后： 一开始我是用vue里面router-link-exact-active来做的 在子路由点击的时候，要保证此时当前的激活路由还处于active状态，显然如果用router-link-exact-active 来做的话 ，就不能实现了。即在你点击子路由的时候，主路由的active样式就消失了， router-link-...
router-link-active 与 router-link-exact-active 区别
weixin_30326515的博客
12-09 237
我的github:swarz,欢迎给老弟我++星星 router-link-exact-active 是精确匹配规则，即只有当前点击router被匹配 router-link-active 默认是全包含匹配规则，即path名全包含在当前router path名开头的router也会被匹配到。 　　　　　　　1. <router-link to='/'> ...
vue 添加动态类名的方法
oLylia的博客
09-12 5198
vue 添加动态类名的方法【超实用】
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中router-link标签所必备了解属性
weixin_41224029的博客
04-10 3581
to 表示目标路由的链接。 当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。 <!-- 字符串 --> <router-link to="home">Home</router-link> <!-- 渲染结果 --> <a href="home">Home</a...
router-link-exact-active和router-link-active区别
焘焘不绝的博客
10-21 1882
在使用Vue-Cli写项目的时候,在需要改变路由样式是，一般我们就是利用router-link的router-link-exact-active和router-link-active这两个类。那么这两个类有什么区别呢？ 1.router-link-exact-active router-link-exact-active类名是当前路由在哪，则这个类名添加到哪个路由的对应标签上。比如当我to到或重定向到某个路由的时候，则router-link-exact-active类名会添加那个路由的a标签上。根据这个特性
vue基础 - 13 （vue router 访问不存在的页面，＜router-link＞当前样式项：class=“router-link-exact-active“）
欢迎来到猫猫的博客 o_o ，如有问题，欢迎提出改正~
12-04 949
1、访问不存在的页面 router/index.js // 路由匹配的规则: 按照routes 数组中内容的书写顺序, 从上向下匹配: 统配符 * // 如果用户的路径不正确, 则进入通配符指定的页面组件 { path: "*", name: "NotFound", component: () => import("../views/NotFound.vue"), // component: NotFound, }, ...
ElementUI导航栏路由
浮梦一场
02-13 3188
&lt;el-menu :default-active="$route.path" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"
vue-router中用'*'指定默认组件的时候不加载router-link-exact-active的问题
yuan5801551的博客
08-12 1735
vue-router中用’*'指定默认组件的时候不加载router-link-exact-active的问题 在vue-router中，我们想要定义默认主页，就可以使用’*'通配符： 优点:{ 1,可以解决404问题 2,可以定义默认页面 } 缺点：{ 1,给页面带来未知的隐患 } router-link-exact-active，关于这个我们知道，在vue-router中这个是可以直接使用而不用...
Vue Router RouterOptions（linkActiveClass、linkExactActiveClass）
最新发布
Vinca@的博客
07-17 1292
在实际开发中，可以通过动态设置这些类名，或者结合条件来自定义样式，以便更好地反映当前路由的状态。以下是一个简单的示例，展示了如何使用 linkActiveClass 和 linkExactActiveClass，以及如何根据不同的路由状态自定义类名。
Vue-router
m0_60505147的博客
10-30 567
/ path也可以不以/开头，这种叫相对写法，相对于自己的父级path xxx===/layout/xxx。// path以开头的叫绝对写法，意思 ：写什么路由的path是什么最后就是什么 /xxx===/xxx。
技巧2 router-link鼠标切换样式 vue3中.router-link-exact-active失效
yangyangdt的博客
01-05 3034
vue3中按vue2做，router-link并不能变样式，并且还是官方的绿色样式，显然在vue3中这个属性已经不适用了。因为在vue2中...
vue-router二级路由会加上router-link-exact-active router-link-active
qq_30236067的博客
09-20 2895
vue-router二级路由会加上router-link-exact-active router-link-active 切换路由的时候，router-link-active会给二级添加， 一级路由加不上 解决方案 监听一下路由，动态添加class &lt;router-link tag="li" :to="{name: 'index_information'}" v-bind:class=...
使用router-link-active和exact动态切换路由样式
weixin_30735745的博客
05-08 568
每个router-link标签被点击时都有一个router-link-active的类，设置这个类的样式，就可以在vue里实现类的动态切换，在每个router-link标签里，都要加上exact这个属性，才能正常切换。 例子： <template> <div> <!-- 每个router-link标签里都要加上exact属性 --> ...
vue-router进入页面时导航栏没有active效果
qq_25302061的博客
10-25 1795
{path:'/',component:'/x'}这样进入页面时会有加载组件的效果，但是导航栏没有active效果。可以改为[{path:'/',redirect:'/x'},{path:'/x',component:'/x'}]
解决vue3 el-menu 刷新页面菜单选中项和路由不匹配
hzxOnlineOk的博客
10-15 2881
网上找到的方法有2种： 1、给el-menu组件增加属性 :default-active="this.$route.path" 但是博主试了下，打印出来的路由this.$route.path一直是/，放弃 2、通过this.$router.currentRoute console.log('当前路由', this.$router.currentRoute); 所以我们可以通过this.$router.currentRoute._value.fullPath访问到当前激活的url，然后将.
RouterLink匹配类名
m0_45219210的博客
04-22 557
根据to后面的路径匹配对应的类名。规则如下 router-link-active 当你的路由路径包含 router-link组件的to属性值，当前组件会加上它 router-link-exact-active 当你的路由路径完全和你的router-link组件的to属性值一致，当前组件会加上它 像下面这行代码，就是当url后面的路径为/member时吗，就会给当前的RouterLink添加上名active的类名。 <RouterLink exact-active-class="act
Vue3 注册组件、使用样式、props的使用和绑定类名
m0_52411807的博客
06-26 831
在项目目录打开cmd输入 main.js src目录下的App.vue 01.gobalReg下的Swiper.vue和Test.vue 02.prviateReg下的Search.vue 上述组件的显示效果 03.style目录下的App.vue和List.vue 显示效果 显示效果 05.class&style下的App.vue和Style.vue 显示效果.........
vue路由跳转后高亮问题|active class(激活状态)linkActiveClass 和 linkExactActiveClass以及exact
x_xiNan9416的博客
09-27 3772
linkActiveClass 是模糊匹配 linkExactActiveClass 是精准匹配 exact也是精准的意思 问题 看下边图片: 当css样式为#nav a.router-link-exact-active { color: #42b983; }时,如果下边没有子路由不会有什么问题,但是如果有子集路由的话,当你点击小说下边的子集路由小说就不会高亮 图片如下: 解决这个问题只需要改变css为#nav a.router-link-active { color: #42b983; } 对比初始的
vue中的.router-link-active和.router-link-exact-active什么意思
07-28
在Vue中，.router-link-active和.router-link-exact-active是用于样式控制的类名。这些类名可以用于给当前活动的路由链接添加样式。 .router-link-active类名会在当前路由链接的路径与当前路由匹配时被添加到元素上。例如，当访问路径为"/"时，具有to="/"的<router-link>元素会被添加.router-link-active类名。\[2\] 而.router-link-exact-active类名则会在当前路由链接的路径与当前路由完全匹配时被添加到元素上。例如，当访问路径为"/"时，具有to="/"且带有exact修饰符的<router-link>元素会被添加.router-link-exact-active类名。\[1\] 通过为这些类名添加样式，我们可以在活动的路由链接上应用特定的样式，以提高用户体验或突出显示当前所在的页面。 #### 引用[.reference_title] - *1* *2* [router-link-active 与 router-link-exact-active 区别](https://blog.youkuaiyun.com/OJNBO_1/article/details/129475223)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [Vue路由中的router-link-exact-active和router-link-active](https://blog.youkuaiyun.com/zyz00000000/article/details/88713716)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值