首页 > 其他分享 >Vue基础知识:声明式导航---导航链接router-link,router-link是什么,怎么用?router-link-active和router-link-exact-active的区别

Vue基础知识:声明式导航---导航链接router-link,router-link是什么,怎么用?router-link-active和router-link-exact-active的区别

时间:2024-04-04 17:30:37浏览次数:23  
标签:高亮 link active router exact find

router-link是什么?

vue-router提供的一个全局组件,router-link(用于取代a标签)

router-link怎么用?

router-link的好处?

1.能够跳转,能高亮(自带激活时的类名)

1.能跳转,配置to属性指定路径(必须)。本质还是a标签,to 不需要多加#

既然已经有了a标签,为什么还有加一个router-link标签呢?这就取决于它的第二个特点:

 2.能高亮,默认就会提供高亮类名(多出router-link-exact-active和 router-link-active这两个类),可以直接设置高亮样式(不需要通过js)

 

 

那么这里涉及到一个问题,router-link自动给当前导航添加的两个高亮类名有什么不同呢? 

以下图为例

1.router-link-active 模糊匹配(应用比较多) 

 to="/find" 可以许多路由,比如:/find        /find/home        /find/foods        .....以/find开头都会添加

2.router-link-exact-active 精准匹配

 to="/find" 只能匹配        /find

举例说明:

router-link-active 模糊匹配

 

 router-link-exact-active 精准匹配

标签:高亮,link,active,router,exact,find
From: https://blog.csdn.net/zxn275266/article/details/137374454

相关文章

  • 锂电池算法学习集合---基于matlab/simulink的电池参数辨识、充放电、SOC估计算法。
    整理了锂电池的多种算法合集:涵盖电动汽车Simulink模型、电动汽车动力电池SOC估算模型、动力电池及电池管理系统BMS。电动汽车动力电池SOC估算模型含有:电池参数辨识模型、电池的充放电数据、电池手册、卡尔曼滤波电池SOC文献、卡尔曼滤波算法的锂电池SOC估算模型。电池参数辨......
  • Cisco IOS XRv 9000 Router IOS XR Software 24.1.1(ED) - 服务提供商边缘虚拟路由器
    CiscoIOSXRv9000RouterIOSXRSoftware24.1.1(ED)-服务提供商边缘虚拟路由器CiscoIOSXRv9000路由器请访问原文链接:https://sysin.org/blog/cisco-ios-xrv-9000/,查看最新版。原创作品,转载请保留出处。作者主页:sysin.org思科IOS-XR简介CiscoIOSXRv9000路由......
  • OSPF & Virtual Link
    syssysnR1intg0/0/0ipadd172.0.10.124ospf1router-id255.255.255.255area0net172.0.10.00.0.0.255syssysnR2intg0/0/0ipadd172.0.10.224intg0/0/1ipadd172.0.20.124ospf1router-id2.2.2.2area0network172.0.10.00.0.0.255area1......
  • FlinkSQL Unable to create a source for reading table 'default_catalog.default_da
    问题描述使用FlinkSql的jdbc连接器读取mysql的一张表,总是提示 Exceptioninthread"main"org.apache.flink.table.api.ValidationException:Unabletocreateasourceforreadingtable'default_catalog.default_database程序代码publicstaticvoidmai......
  • SpringBoot集成Flink-CDC,实现对数据库数据的监听
    一、什么是CDC?  CDC是 ChangeDataCapture(变更数据获取) 的简称。核心思想是,监测并捕获数据库的变动(包括数据或数据表的插入、更新以及删除等),将这些变更按发生的顺序完整记录下来,写入到消息中间件中以供其他服务进行订阅及消费。二、Flink-CDC是什么?CDCConnector......
  • Flink入门
    1.Flink架构Flink的角色Client:获取、转换、提交代码给jm.JM:对job做任务调度,再对job进一步处理转换,然后分发给TM.TM:数据处理.部署模式区别:集群的生命周期和资源的分配方法,代码的main方式在client执行还是JM执行。session会话:启动一个集群保持会话,通过client提交作......
  • Flink源码
    1.源码编译flink-1.19jdk-1.8scala-2.12mvm-3.86自定义日志:注意修改8081端口,可能被占用;windows日志的路径命名不能包含:,要改名自定义jar-Dlog.file=./log/flink-tm-1.local.log-Dlog4j.configuration=./a_conf/log4j.properties-Dlog4j.configurationFile=./a_conf/l......
  • 二十三、Flink Table API之基本API
    一、介绍  在Flink提供的多层级API中(如下图示),核心是DataStreamAPI,这是开发流处理应用的基本途径;底层则是所谓的处理函数(processfunction),可以访问事件的时间信息、注册定时器、自定义状态,进行有状态的流处理。DataStreamAPI和处理函数比较通用,有了这些API,理论上就可以实现所有......
  • Flink Sql 的查询
    一、DataGen& Print        (1)创建数据生成器源表CREATETABLEsource(    idINT,    tsBIGINT,    vcINT)WITH(    'connector'='datagen',    'rows-per-second'='1',    'fields.id.kind'='ran......
  • vue引入vue-router
    Vue路由(router)的安装和使用安装vue-router插件第一步:在CMD窗口中,使用命令跳转到vue的安装路径下第二步:输入命令:npmivue-router@3vue2要安装vue-router3npmivue-router@3vu3要安装vue-router4npmivue-router@4第三步:出现added1packagein2m表示安装成功vu......