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

最新推荐文章于 2024-07-21 00:03:27 发布

原创最新推荐文章于 2024-07-21 00:03:27 发布 · 793 阅读

0 ·

CC 4.0 BY-SA版权

VUE 同时被 2 个专栏收录

117 篇文章

订阅专栏

CSS样式

25 篇文章

订阅专栏

本文介绍了一种使用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;

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

zlting~

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue-Router的使用详解

nanxing的博客

07-07

1298

Vue-Router的使用详解认识路由渲染 & 路由URL的hash & HTML5的History使用 vue-router基本使用其他小补充router-link属性路由懒加载 (常用)动态路由基本使用获取动态路由的值匹配多个参数NotFound路由的嵌套代码实现路由跳转query方式的参数发送接收router-link的补充router-link的插槽router-view的补充router-view的插槽动态添加路由路由守卫认识路由渲染 & 路由后端渲染 & 前

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路由中的router-link-exact-active和router-link-active

最新发布

大学生小郑的博客

07-21

1561

vue-router 路由详解

【vue2第十五章】VueRouter 路由配置(VueRouter)与使用和 router-link与router-view标签使用

weixin_72979483的博客

09-07

2628

Vue Router 是 Vue.js 官方提供的路由管理器。它能够帮助你在 Vue 单页面应用（SPA）中实现页面之间的导航和路由功能。它是一种映射关系，映射了页面组件与路径的关系。如何配置VueRouter 1. 下载vue-router因为它是一个单独的模块所以需要下载。 **vue2对应的vue-router版本是 vue-router3.x vue3对应的vue-router版本是 vue-router4.x** 使用npm下载：`npm install vue-router

Vue路由管理器Vue-router的使用方法详解

10-15

Vue-router 是Vue.js应用中的重要组件，用于管理应用程序的路由，使得页面间的切换变得简单而优雅。本篇文章将深入探讨Vue-router的使用方法，帮助开发者更好地理解和应用。首先，我们来了解一下`<router-link>`...

详解vue中router-link标签所必备了解的属性

10-17

<router-link to="/route2" exact-active-class="exact-active">Route2</router-link> ``` 当/route2完全匹配当前路由时，上述代码会被渲染为带有_class="exact-active"的a标签。 ```html <router-link to="/route...

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

<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 <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>  ...

vue-router进入页面时导航栏没有active效果

qq_25302061的博客

10-25

1795

{path:'/',component:'/x'}这样进入页面时会有加载组件的效果，但是导航栏没有active效果。可以改为[{path:'/',redirect:'/x'},{path:'/x',component:'/x'}]

vue中的.router-link-active和.router-link-exact-active什么意思

07-28

在Vue中，.router-link-active和.router-link-exact-active是用于样式控制的类名。这些类名可以用于给当前活动的路由链接添加样式。 .router-link-active类名会在当前路由链接的路径与当前路由匹配时被添加到元素...