一、是什么

<router-link>组件支持用户在具有路由功能的应用中 (点击) 导航。通过 to 属性指定目标地址，默认渲染成带有正确链接的 <a> 标签，可以通过配置 tag 属性生成别的标签。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名

二、<router-link>的属性及其用法

属性：to 、replace、 append、 tag、 active-class、 exact 、 event、 exact-active-class

1、属性to必选。指定要跳转到的链接。可以是一个字符串，也可以动态绑定一个跳转链接，同时可以携带参数

to接收一个字符串：

<router-link to='/home'>home</router-link>

动态绑定并且携带参数：

 <router-link class='classLink' target="_blank" :to="{path: '/news',query: {id: id}}">{{items[0].content}}</router-link>
// target='_blank' 表示跳转到一个新的页面

2、属性tag。可以将<router-link>渲染成指定的标签，默认是渲染成a标签。

下方代码是将router-link渲染成li标签

//将router-li 渲染成li
<router-link :to="index"tag="li"event="mouseover">Home
</router-link>//如果此时我们想要在这个li标签中添加a标签,如下所示，可以不为a标签添加href属性
<router-link :to="{name:'Home'}" tag="li"><a>Home</a>
</router-link>

3、属性event。该属性指定触发router-link的鼠标事件类型，默认值为click。

下方代码将router-link触发事件改为mouseover（鼠标移入事件）

<router-link :to='home' event='mouseover'>home
</router-link>

4、属性replace。router-link 跳转默认模式（replace='false'）是采用router.push() 。当replace='true'后跳转模式采用router.replace()。导航不会记录到history

其余属性不怎么常用，碰到了比较好的场景了再补充

＜router-link＞相关推荐

数字后端基本概念介绍＜Blockage Link＞
今天我们要介绍的数字后端概念是Blockage Link.这其实并不是一个Floorplan Object.它在GUI上是一条绿线,用于连接指向macro和blockage之间的关系.当一个block ...
c语言switch虚线,有以下程序：include＜stdio.h＞main（){int c；while（（c=getchar（))!='\n')switch（c－'2'){case 1：pu...
有以下程序:include<stdio.h>main(){int c:while((c=getchar())!='\n')switch(c-'2'){case 1:pu 更多相关问题双代 ...
List＜Map＜String, Object＞＞——多层嵌套的数据结构
文章目录快速理解多重嵌套结构 Map基础知识 List 例子查询数据库快速理解多重嵌套结构对于多层嵌套的数据结构,需要层层分解. 以List<Map<String, Object& ...
＜Linux开发＞ ubuntu开发工具-Ubuntu测试网速及实时网速图
<Linux开发> ubuntu开发工具-Ubuntu测试网速及实时网速图一.查看网线上行.下行网速 1.安装speedtest-cli工具 water@water-Tower-PC:~ ...
Python房价分析和可视化＜anjuke二手房＞
Python房价分析和可视化<anjuke二手房> 本文是Python数据分析实战的房价分析系列,本文分析二线城市贵阳的二手房. 数据获取本文的数据来源于2022年7月anjuke的二手 ...
Spring 事务源码(2)—＜tx:annotation-driven/＞事务标签源码解析
基于最新Spring 5.x,详细介绍了Spring 事务源码,包括< tx:annotation-driven/>标签源码解析. 此前我们已经学习了Spring的<tx:a ...
Spring AOP源码(1)—＜aop:config/＞AOP配置标签解析【一万字】
基于最新Spring 5.x,对Spring AOP中的<aop:config/>标签的解析源码进行了详细分析,这是Spring AOP源码的入口! 此前我们已经详细学习了Spri ...
＜Linux开发＞--驱动开发-- 字符设备驱动（3）过程详细记录
<Linux开发>–驱动开发-- 字符设备驱动(3) 过程详细记录驱动开发是建立再系统之上的,前面作者也记录了系统移植的过程记录,如果有兴趣,可进入博主的主页查看相关文章,这里就不添加链 ...
＜计算机视觉六＞深度学习目标检测模型的评估标准
鼠标点击下载项目源代码免费下载地址 <计算机视觉一> 使用标定工具标定自己的目标检测 <计算机视觉二> labelme标定的数据转换成yolo训练格式 <计算机 ...
＜Android开发＞ Android vold - 第三篇 vold 的NetLinkManager类简介
本系列主要介绍 Android vold,分为以下篇章 <Android开发> Android vold - 第一篇 vold前言简介 <Android开发> Android ...

＜router-link＞

一、是什么

二、<router-link>的属性及其用法

＜router-link＞相关推荐

最新文章

热门文章