active-class 与 exact-active-class 区别

最新推荐文章于 2024-08-02 17:03:03 发布
最新推荐文章于 2024-08-02 17:03:03 发布
阅读量863 收藏 1
点赞数 1
分类专栏： 大前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40599109/article/details/108669962
版权
本文介绍了Vue Router中`active-class`和`exact-active-class`的区别。`active-class`是全包含匹配，即使路径部分包含在当前路由中也会激活，而`exact-active-class`则要求精确匹配，只有完全相同的路径才会被激活。通过示例展示了两者在匹配效果上的不同。
摘要由CSDN通过智能技术生成

active-class

类型: string

默认值: “router-link-active”

默认是全包含匹配规则，即path名全包含在当前routerpath名开头的router也会被匹配到

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

测试active-class：

在登录页面匹配到to=’/login’的时候，首页to=’/'也会被匹配到

<template>
  <div class="hello">
    我是登录
    <router-link to='/'>首页</router
最低0.47元/天 解锁文章
大唐荣华
关注
专栏目录
router-link-active 与 router-link-exact-active 区别
OJNBO_1的博客
03-12 705
router-link-active 与 router-link-exact-active 区别
vue的active-class和exact-active-class的作用和区别
Wancc123的博客
03-08 2282
active-class基本使用 设置 链接激活时使用的 CSS 类名。可以通过以下代码来替代。 被激活时 Router Link 1 背景颜色显示红色 <style> ._active{ background-color : red; } </style> <p> <router-link v-bind:to = "{ path: '/route1'}" active-class = "_active">Router Link
router-link组件中的属性——active-class
最新发布
2201_75773271的博客
08-02 469
因为to="/" 引起的， active-class选择样式时根据路由中的路径去匹配， 然后显示， 例如在my页面中， 路由为localhost:8081/#/my，那么to="/”和to="/my"都可以匹配到， 所 有都会激活选中样式。
vue2.0中关于active-class
青梅煮码
06-12 180
一、active-class是什么 active-class是vue-router模块的router-link组件中的属性，用来做选中样式的切换； 相关可查阅文档：https://router.vuejs.org/zh-cn/api/router-link.html 二、在vue-router中要使用active-class有两种方法： 1、直接在路由js文件中配置lin...
VueRouter的active-class，exact，exact-active-class三个属性的使用
faker____的博客
07-03 2132
<router-link to="/news">唐诗</router-link> <router-link to="/news/exact/test" >test唐诗</router-link> <router-link to="/" exact> 导航 </router-link> ...
active-class:用 JavaScript 定义你的类
06-29
活跃班级 用 JavaScript 定义你的类。 安装 $ npm install -g bower $ bower install active-class 或者只是使用dist目录中的捆绑版本。 用法 简单继承 要创建新类，请使用以下语法： var MyClass = Class(prototype); var Foo = Class({ _constructor: function (name) { this.name = name; }, say: function (prefix) { return prefix + ' ' + this.name; } }); var foo = new Foo('foo'); foo.say('hello'); // hello foo 多重继承 要创建具有多重继承的新类，请使用以下语法： var
Vue.js——vue-router路由，关于exact-active-class 和 active-class 的区别
程序员野蛮成长
03-25 1011
exact-active-class 和 active-class 的区别 router-link 默认情况下的路由是模糊匹配，例如当前路径是 /article/1 那么也会激活 ，所以当设置 exact-active-class 以后，这个 router-link 只有在当前路由被全包含匹配时才会被激活 exact-active-class 中的 class。 当用户访问 /article/1...
nuxt-link属性有to、exact、active-class、exact-active-class等，详细说下。
04-19
- exact-active-class：当链接到的路由与当前路由精确匹配时，链接使用的 CSS 类名。默认值为 "nuxt-link-exact-active"。 例如，以下代码生成一个链接到 "/about" 路由的 nuxt-link 组件： ``` <nuxt-link to="/...
active-class 属于哪个组件中的属性？该如何使用？
麦呢头冷的博客
11-07 4372
active-class是 vue-router模块中 router-link 组件中的属性，主要作用是用来实现选中 样式的切换。 一、active-class 的使用方式 在 vue-router 中使用 active-class 有两种方式: 1.在 router-link 中写入 active-class active-class 选择样式时根据路由中的路径（to=“/home”）去匹配，然后显示 <router-link to="/home" class="menu-home" .
Vue点击切换Class变化,实现Active当前样式操作
11-20
刚入门Vue没多久，在制作过程中遇到很多简单实用的小技巧。 没有太多的墨水，直接上代码： 一、先在data里增加一个变量，用来储存当前点击的元素 data() { return { activeClass: -1, // 0为默认选择第一个，-1为不选择 }; }, 二、在Template里面的代码，切记在@click方法里面要传index， <li :class="activeClass == index ? 'active':''" v-for="(item,index) in itemList" :key="index" @click="getItem(index)"
Vue Router active-class 属性
lio-zero 的博客
05-22 2336
active-class 是 vue-router 模块的 router-link 组件的属性，当 router-link 标签被点击时将会应用这个样式。 有两种使用方式： 直接在路由 Router 构造函数中配置 linkActiveClass 属性 export default new Router({ linkActiveClass: 'active', }) 使用这种方式，会在每个...
Vue 中 :class 和 active-class
weixin_51926913的博客
06-20 514
/
vue路由的active-class和exact-active-class区别
11-06 1103
exact-active-class 和 active-class 的区别 router-link 默认情况下的路由是模糊匹配，例如当前路径是 /article/1 那么也会激活 <router-link to="/article">，所以当设置 exact-active-class 以后，这个 router-link 只有在当前路由被全包含匹配时才会被激活 exact-a...
vue 路由中exact-active-class 和 active-class 的区别
Hailee7的博客
03-24 677
active-class 是哪个组件的属性？
nanzhuhe的博客
03-21 8753
active-class 属于vue-router的样式方法，当router-link标签被点击时将会应用这个样式 一、首先，active-class是什么， active-class是vue-router模块的router-link组件中的属性，用来做选中样式的切换； 相关可查阅文档：https://router.vuejs.org/zh-cn/api/router-link.html 二、在v...
vue导航栏激活样式active-class和exact-active-class的使用
jjw_zyfx的博客
03-27 714
vue导航栏激活样式active-class和exact-active-class的使用
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值