Vue(13)——router-link

router-link

vue-router提供了一个全局组件router-link(取代a标签)

  1. 能跳转,配置to属性指定路径(必须)。本质还是a标签。
  2. 默认会提供高亮类名,可以直接设置高亮样式

右键检查,发现多了两个类:

可以直接写样式:

 点击即可显示高亮。


router-link-active  模糊匹配

to="/my"  可以匹配/my  /my/a  /my/b  .....

router-link-exact-active  精确匹配

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


router-link的类名太长了,可以通过配置实现定制:

const router = new VueRouter({

  router:[...],

  linkActiveClass:"类名1",

  linkExactActiveClass:"类名2"

})

在index.js里面进行配置:

跳转传参 

查询参数传参

语法格式:  to="/path?参数名=值"

对应页面组件接收传递过来的值: $route.query.参数名

动态路由传参

配置动态路由:

  routes: [

    {path:'/search/:words', component:search}

  ]

配置导航连接:

to="/path/参数值"

对应页面组件接收传值

$route.params.参数名

重定向

重定向:匹配path后,强制跳转path路径

语法:

{path:匹配路径 , redirect : 重定向到的路径}

404 

当路径找不到匹配时,给个提示页面

位置:配在路由最后

语法:path:"*"     -前面不匹配就命中最后一个

 

模式设置

路由的路径都带有#,可以在配置router时配置:

mode:"history" 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/881267.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【React】React18.2.0核心源码解读

前言 本文使用 React18.2.0 的源码,如果想回退到某一版本执行git checkout tags/v18.2.0即可。如果打开源码发现js文件报ts类型错误请看本人另一篇文章:VsCode查看React源码全是类型报错如何解决。 阅读源码的过程: 下载源码 观察 package…

IPD流程体系:IPD在硬件产品开发中的应用

目录 1、内容简介 2、开发各阶段介绍 3、PVT阶段 4、资源群更新 作者简介 1、内容简介 在硬件类相关产品的开发过程中, 每个阶段的工作都是需要按照一定的流程、规范和标准去进行的。 整体还是相对瀑布化的流程, 每个阶段的输入、输出、准入、准…

第四天旅游线路预览——从贾登峪到喀纳斯景区入口(贾登峪游客服务中心)

第四天:从贾登峪到喀纳斯风景区入口,晚上住宿贾登峪; 从贾登峪到喀纳斯景区入口(贾登峪游客服务中心): 搭乘贾登峪①路车,路过三湾到达景区换乘中心,路程时长约40分钟; …

autodl连接xftp

(1)首先打开xftp,新建会话 (2)给会话取个名字,然后填写主机和端口号 (3) 主机和端口号从autodl实例中找,登入指令那里 (4)点击复制,然…

展锐平台的手机camera 系统开发过程

展锐公司有自己的isp 图像处理引擎,从2012 年底就开始在智能手机上部署应用。最初的时候就几个人做一款isp的从hal 到kernel 驱动的完整软件系统,分工不是很明确,基本是谁擅长哪些就搞哪些,除了架构和编码实现之外,另外…

Kafka 基于SASL/SCRAM动态认证部署,kafka加账号密码登录部署

文章目录 前言下载 kafka安装启动zookeeper添加账号密码 启动kafka修改kafka配置文件增加jaas授权文件修改启动文件,启动kafka检查是否部署成功 offset explore 连接 前言 其实挺简单的几个配置文件,问大模型一直没说到点上,绕晕了。SASL/SC…

【linux】4张卡,坏了1张,怎么办?

先禁用这张卡 grub 禁用,防止加载驱动 禁用这张卡的 PCI # 禁用 PCI 设备 0000:b1:00.0 (NVIDIA GPU) ACTION"add", SUBSYSTEM"pci", ATTR{vendor}"0x10de", KERNELS"0000:b1:00.0", RUN"/bin/sh -c echo 0000:b1:00…

数据技术进化史:从数据仓库到数据中台再到数据飞轮的旅程

随着大数据时代的到来,数据已经成为企业的核心资产之一。在过去几十年间,数据技术也随之不断演进,从早期的数据仓库到近年来热门的数据中台,再到正在快速发展的数据飞轮概念,每一步都是技术革新的体现。 一、数据仓库&…

股价预测,非线性注意力更佳?

作者:老余捞鱼 原创不易,转载请标明出处及原作者。 写在前面的话: 本文探讨了在 transformer 模型中使用非线性注意力来预测股票价格的概念。我们讨论了黎曼空间和希尔伯特空间等非线性空间的数学基础,解释了为什么非线性建模可能是有利的,并提供了在代码中实现这种…

【二十】【QT开发应用】listwidget右键菜单和删除item

创建项目,添加资源文件 在项目文件夹中创建resources资源文件夹。 在vs中打开qrc文件,选择添加资源文件。 选择我们resources资源文件中的所有文件作为资源文件。 最后不要忘记点击保存。 向ListWidget控件添加item 右键菜单 在.h文件中添加QMenu头…

java项目之编程训练系统源码(springboot)

风定落花生,歌声逐流水,大家好我是风歌,混迹在java圈的辛苦码农。今天要和大家聊的是一款基于springboot的编程训练系统。项目源码以及部署相关请联系风歌,文末附上联系信息 。 项目简介: 编程训练系统的主要使用者管…

结合人工智能,大数据,物联网等主流技术实现业务流程的闭环整合的名厨亮灶开源了

明厨亮灶视频监控平台是一款功能强大且简单易用的实时算法视频监控系统。它的愿景是最底层打通各大芯片厂商相互间的壁垒,省去繁琐重复的适配流程,实现芯片、算法、应用的全流程组合,从而大大减少企业级应用约95%的开发成本。AI技术可以24小时…

1.5 计算机网络的分层结构

欢迎大家订阅【计算机网络】学习专栏,开启你的计算机网络学习之旅! 文章目录 前言1 分层设计2 网络体系结构2.1 基本概述2.2 常见的三种网络体系结构 3 各层之间的关系3.1 水平关系3.2 垂直关系 4 数据传输过程4.1 水平视角4.2 垂直视角 前言 在当今数字…

uniapp H5 打开地图 并选中标记点

uniapp H5 打开地图 并选中标记点 先上代码 //打开地图 显示景区位置openMap() {// 支付宝// #ifdef MP-ALIPAYmy.openLocation({longitude: Number(this.detailObj.longitude), // 经度latitude: Number(this.detailObj.latitude), // 纬度name: this.detailObj.scenicName, …

CertiK因发现Apple Vision Pro眼动追踪技术漏洞,第6次获苹果认可

​2024年9月20日,头部Web3.0安全机构CertiK自豪地宣布,CertiK的工程师因发现Apple Vision Pro MR(混合现实)头显设备中的关键漏洞而获得Apple公司认可,这已经是Apple公司第六次公开发布对CertiK的致谢,Cert…

文件格式转换:EXCEL和CSV文件格式互相转换

目录 1.EXCEl和CSV文件格式互相转换1.1首先安装所需的Python包1.2excel转换为csv代码如下:1.3csv转换为excel代码如下: 由于excel文件在数学建模数据处理当中的局限性,我们通常把excel文件转换为csv文件来处理,下面是相关的代码&a…

IDEA配置全局的maven环境

1、关闭掉所有打开的项目,然后点击All settings 2、配置maven home path、user setting file、local repository。 3、配置JRE的版本 4、配置字节码版本

【第十三章:Sentosa_DSML社区版-机器学习聚类】

目录 【第十三章:Sentosa_DSML社区版-机器学习聚类】 13.1 KMeans聚类 13.2 二分KMeans聚类 13.3 高斯混合聚类 13.4 模糊C均值聚类 13.5 Canopy聚类 13.6 Canopy-KMeans聚类 13.7 文档主题生成模型聚类 13.8 谱聚类 【第十三章:Sentosa_DSML社…

聊天组件 Vue3-beautiful-chat 插槽

前言 Vue3-beautiful-chat 组件有四个插槽可以定制 一、user-avatar(头像) 首先是头像插槽,我们可以直接在 <beautiful-chat></beautiful-chat> 中间使用; 作用: 我们可以在用户头像上添加自定义样式,比如添加节日边框、可以使用首字母作为头像。。。 …

由于安全风险,安全领导者考虑禁止人工智能编码

安全团队与开发团队之间的紧张关系 83% 的安全领导者表示&#xff0c;他们的开发人员目前使用人工智能来生成代码&#xff0c;57% 的人表示这已成为一种常见做法。 然而&#xff0c;72% 的人认为他们别无选择&#xff0c;只能允许开发人员使用人工智能来保持竞争力&#xff0…