vue-router中的exact作用

最新推荐文章于 2024-05-14 10:32:56 发布
最新推荐文章于 2024-05-14 10:32:56 发布
阅读量2.1k 收藏 6
点赞数 3
分类专栏： Vue.js 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49693227/article/details/113407440
版权

exact
类型: boolean

默认值: false

“是否激活”默认类名的依据是包含匹配。 举个例子，如果当前的路径是 /a 开头的，那么 也会被设置 CSS 类名。
按照这个规则，每个路由都会激活 ！想要链接使用“精确匹配模式”，则使用 exact 属性：

<!-- 这个链接只会在地址为 / 的时候被激活 -->
<router-link to="/" exact></router-link>

目前唯一用到的场景是 导航 切换问题, 切换到别的路由的时候,激活样式都一直存在的 加上 exact 关键字之后就可以了

搬运工_XXX
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-router-apply:vue-router源码简单实现
05-16
2. **Router 实例**：创建 `new VueRouter(options)` 实例，其中 `options` 包含路由配置、导航守卫、滚动行为等设置。 3. **导航解析器**：Vue Router 解析路由配置，并根据 URL 生成对应的组件树。 4. **导航...
VueRouter的active-class，exact，exact-active-class三个属性的使用
faker____的博客
07-03 2101
<router-link to="/news">唐诗</router-link> <router-link to="/news/exact/test" >test唐诗</router-link> <router-link to="/" exact> 导航 </router-link> ...
vue路由----append、exact、query属性
weixin_44010187的博客
07-09 4197
1.在idea中新建vue项目 2.main.js中修改 import Vue from 'vue' // import Router from './Router' /*引用自同级Router.js*/ // import Router from './SonRouter' /*引用自同级SonRouter.js*/ // import Router from './Compon...
vue 中router-link属性设置
最新发布
2401_84152308的博客
05-14 333
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
一文详解:Vue3中使用Vue Router
热门推荐
九仞山的专栏
06-11 3万+
详细介绍了Vue3中使用Vue Router，从Vue Router的安装，基础知识到路由嵌套、路由守卫及路由懒加载等内容详细探讨了Vue Router的使用方法
Vue 修饰符总结
Br不二
02-23 220
Vue.js 2.x 版本中，修饰符（Modifiers）是指在指令后面以点（.）形式添加的特殊后缀，用于修改指令行为的标记
Vue Router的基本使用、router-link以及router-link-active
drhnb的博客
07-10 5813
在Vue中，可以使用Vue Router来实现路由功能。Vue Router是Vue.js官方提供的一个插件，用于实现前端的路由管理。 使用Vue Router可以将不同的页面映射到对应的URL路径，并通过URL的变化在不刷新页面的情况下展示不同的内容。这样可以实现单页应用（SPA）的效果，让用户在页面之间进行无刷新的导航操作。
使用vue-router为每个路由配置各自的title
12-10
传统方法 以前在单页面路由中，就只能在html文件中定一个固定的网站的...const vueRouter = new Router({ routes, mode: 'history', linkActiveClass: 'active-link', linkExactActiveClass: 'exact-active-link'
Vue路由管理器Vue-router的使用方法详解
10-15
Vue-router 是Vue.js应用中的重要组件，用于管理应用程序的路由，使得页面间的切换变得简单而优雅。本篇文章将深入探讨Vue-router的使用方法，帮助开发者更好地理解和应用。 首先，我们来了解一下`<router-link>`...
vue-router的使用方法及含参数的配置方法
10-17
Vue Router 是 Vue.js 应用中的官方路由管理器，它使得页面导航变得简单，并与 Vue.js 的组件系统紧密结合。在本文中，我们将深入探讨 Vue Router 的使用方法以及如何配置含参数的路由。 首先，让我们从基本的 `...
5.Vue修饰符（Modifier）
相互学习 共同进步
05-14 2050
Vue修饰符（modifier） 修饰符（modifier）是以半角句号“. ”指明的特殊后缀，用于指出一个指令应该以特殊方式绑定 <form v-on:submit.prevent="onSubmit">...</form> .prevent修饰符告诉v-on指令对于触发的事件调用event.preventDefault() 事件修饰符 事件修饰符 描述 .stop 阻止冒泡（阻止事件向上级DOM元素继续传递） .prevent 阻止默认事件的发生，事件不再
【Vue3】 Vue-Router路由和路由导航守卫
weixin_44899940的博客
08-22 5659
Vue-Router路由，编程式导航，动态路由，路由导航守卫
Vue学习日记 Day5
Lin_Zhong_的博客
03-14 624
Vue学习日记——Day 5
vue-router中的exact 到底是用来干嘛的?
寂寥人生
08-27 4252
目前唯一用到的场景是 导航 切换问题, 切换到别的路由的时候,激活样式都一直存在的 加上 exact 关键字之后就可以了 有补充的同学,可以给我留言,帮助一起成长 ...
前端开发框架Vue.js巧妙运用修饰符讲解分析
m0_58371965的博客
10-14 114
在本文我就不详细介绍Vue.js是如何给组件绑定事件了的，大家都知道是通过v-on:事件="事件名" 或者它的语法糖 @事件="事件名"​​前端培训​​。 Vue.js为我们提供了很多不同种类的修饰符，例如事件修饰符 、按键修饰符 、鼠标按键修饰符，我们就对这三种修饰符进行详细的介绍。 一、事件修饰符 首先，来看一下Vue.js为我们提供的事件修饰符有哪些吧。 修饰符名称作用.stop阻止事件进行传递.prevent阻止事件的默认行为.capture使该事件最先触发.self限制事件是由自身触发
Vue-Router 路由基本使用
weixin_41040445的博客
01-23 297
Vue-Router 官网 官方介绍 Vue Router 是Vue.js官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有： 嵌套的路由/视图表 模块化的、基于组件的路由配置 路由参数、查询、通配符 基于 Vue.js 过渡系统的视图过渡效果 细粒度的导航控制 带有自动激活的 CSS class 的链接 HTML5 历史模式或 hash 模式，在 IE9 中自动降级 自定义的滚动条行为 npm 安装 npm install --sav...
React Router 中的 exact 属性
forever__fish的博客
11-08 1004
如果版本在 v6，就不需要关注 exact 属性啦。
Vue.js——vue-router路由，关于exact-active-class 和 active-class 的区别
程序员野蛮成长
03-25 1007
exact-active-class 和 active-class 的区别 router-link 默认情况下的路由是模糊匹配，例如当前路径是 /article/1 那么也会激活 ，所以当设置 exact-active-class 以后，这个 router-link 只有在当前路由被全包含匹配时才会被激活 exact-active-class 中的 class。 当用户访问 /article/1...
【React-Router】exact 属性 与 Umi 路由下的 exact
Milk~每天分享一点点，技术进步一点点
10-12 1474
React-Router exact 属性 exact是Route下的一条属性，一般而言，react路由会匹配所有匹配到的路由组价，exact能够使得路由的匹配更严格一些 exact的值为bool型，为true是表示严格匹配，为false时为正常匹配 如在exact为true时，’/link’与’/’是不匹配的，但是在false的情况下它们又是匹配的 一个常用的场景是这样的： <Route path='/' component={Home} /> <Route path='/page'
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.csdn.net/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.csdn.net/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、付费专栏及课程。

余额充值