【router-link详细介绍】

router-link详细介绍

  • 1. router-link
    • 1.1. to
    • 1.2. replace
    • 1.3. append
    • 1.4. tag
    • 1.5. active-class
    • 1.6. exact
    • 1.7. event
    • 1.8. exact-active-class
    • 1.9. aria-current-value

1. router-link

router-link 是一个用于在 Vue 应用中创建导航链接的组件,由 Vue Router 提供,这个组件用于在不刷新页面的情况下导航到不同的 URL,并且支持 HTML History API,使用 router-link 组件能够生成一个<a>标签,其默认行为与普通的链接相同,但它能够更加智能地处理应用内的导航。

以下是 router-link 的一些主要属性(props)和它们的用途:

1.1. to

to此属性必须设置,它决定了导航的目标路由,其值可以是一个字符串或者一个对象,当使用对象时,可以设置更多选项如pathqueryparams

  • 字符串格式: <router-link to="/about">About</router-link>
  • 对象格式: <router-link :to="{ name: 'about', params: { userId: 123 }}">About</router-link>

1.2. replace

replace设置为 true 后,当点击链接时,会调用 router.replace() 而不是 router.push(),导航后不会留下 history 记录。

  • 示例:
<router-link :to="{ path: '/home'}" replace></router-link>

如果配置了replace,则在点击该链接,将会导致history记录被清空,不能再执行回退。

vue中导航中的后退-前进-编程式导航

this.$router.go(-1) :代表着后退
this.$router.go(1):代表着前进
切换到path为/home的路由
this.$router.push({    path:'/home'
});
//或者使用path,推荐path
this.$router.push({    path:'/home'
});

示例一:编程式前进后退按键
1)在页面上加入前进和后退按钮

<p><button @click="previous">前进</button><button @click="next">后退</button>
</p>

2)添加事件处理程序

methods: {//前进previous: function() {this.$router.go(1);},//后退next: function() {this.$router.go(-1);}
}
vue的 $
除了数据属性,Vue 实例还暴露了一些有用的实例属性与方法,它们都有前缀 $,以便与用户定义的属性区分开

示例二:切换到指定路由:
添加一个“回家”按钮

<button @click="gotohome">回家</button>
gotohome: function() {console.log("go to home");this.$router.push({path: '/home'});
}

示例三,设置默认显示的组件:
这个很简单,只要将需要默认显示的组件对应的路由的path设置为"/"即可

//定义路由表
var routes = [//默认显示home{path:'/', component:Home}, {path:'/home', component:Home},{path:'/about', component:About}
];

示例四:
如果配置了replace,则在点击该链接,将会导致history记录被清空,不能再执行回退。
例如: 将

<router-link to="/home">Home</router-link>

加入replace属性,修改为:

<router-link to="/home" replace>Home</router-link>

通过测试可以看到,点击home后,history记录被清空,所以一般不用。

1.3. append

append设置为 true 时,在当前(相对)路径前添加基路径,如果你当前的路径是 /a<router-link to="b" append> 将导航到 /a/b

1.4. tag

<router-link>默认渲染为<a>标签,有时候想要 <router-link> 渲染成某种标签,例如 <li>, 于是我们使用 tag prop类指定何种标签,同样它还是会监听点击,触发导航,(如果不指定tag,默认渲染为a标签)

<router-link to="/foo" tag="li">foo</router-link>

<!-- 渲染结果 -->
<li>foo</li>

1.5. active-class

active-class全局配置 router-link-active 的默认值,可以通过这个 prop 设置当链接激活时应用于渲染标签的 CSS 类名。

1.6. exact

exact如果设置为 true,则只有在匹配的路径完全等于链接的路径时,才应用 active-class 类。

1.7. event

event指定触发路由导航的事件名,默认为 click

1.8. exact-active-class

exact-active-class全局配置 router-link-exact-active 的默认值,可以通过这个 prop 设置,当链接的完整路径完全匹配当前路径时应用的 CSS 类名。

1.9. aria-current-value

aria-current-value当链接处于活动状态时,aria-current 的值,默认是 page

上述属性使得 router-link 不仅仅是一个链接,还能够根据当前路由的状态调整样式,比如当链接指向当前路由时,可以自动设置一个激活状态的样式类。此外,router-link 还会进行各种内部优化,以确保在相同路由下不重新渲染和最小化 DOM 操作,提高性能。

router-link 组件还支持 Vue Router 的所有导航选项,比如hashquery等,让你能以声明式的方式指定复杂的导航目标,它是构建 Vue.js 单页面应用(SPA)中的重要组件之一。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Github搭建网站】零基础零成本搭建个人Web网站~

Github网站&#xff1a;https://github.com/ 这是我个人搭建的网站&#xff1a;https://xf2001.github.io/xf/ 大家可以搭建完后发评论区看看&#xff01;&#xff01;&#xff01; 搭建教程&#xff1a;https://www.bilibili.com/video/BV1xc41147Vb/?spm_id_from333.999.0.0…

机器学习:简要介绍及应用案例

机器学习是一种人工智能&#xff08;AI&#xff09;的分支&#xff0c;它致力于研究和开发系统&#xff0c;使它们能够从经验中学习并自动改善。这种学习过程使机器能够适应新的数据&#xff0c;识别模式&#xff0c;做出决策和预测&#xff0c;而无需明确的编程。 机器学习的…

CentOS安装Flume

CentOS安装Flume 一、简介二、安装1、下载2、解压3、创建配置文件4、启动flume agent5、验证 一、简介 Flume is a distributed, reliable, and available service for efficiently collecting, aggregating, and moving large amounts of log data. It has a simple and flexi…

ES进阶使用

配置 pom依赖 <dependency><groupId>co.elastic.clients</groupId><artifactId>elasticsearch-java</artifactId><version>7.17.5</version></dependency>yml配置 elasticsearch:address: http://192.168.133.100:9200数据库…

jquery动态引入js和css

直接上代码吧&#xff0c;但是有时候这个方法会失败&#xff0c;js文件里面的方法不生效&#xff0c;原因还在找 // 动态引入cssvar cssFileUrl index.css;$("head").append("<link>");css $("head").children(":last");css.a…

计算机导论06-人机交互

文章目录 人机交互基础人机交互概述人机交互及其发展人机交互方式人机界面 新型人机交互技术显示屏技术跟踪与识别&#xff08;技术&#xff09;脑-机接口 多媒体技术多媒体技术基础多媒体的概念多媒体技术及其特性多媒体技术的应用多媒体技术发展趋势 多媒体应用技术文字&…

MySQL进阶篇:索引(概述,结构,分类,语法,SQL性能分析,索引使用,设计原则)

目录 1.索引概述2.索引结构1.B树&#xff08;多路平衡查找树&#xff09;2.B树3.Hash1.特点2.存储引擎支持 4.选择B树作为InnoDB存储引擎索引结构的原因 3.索引分类1.聚集索引选取规则2.回表查询 4.索引语法1.创建索引2.查看索引3.删除索引 5.SQL性能分析1.SQL执行频率2.慢查询…

某马头条——day06

自媒体文章上下架 使用消息队列在自媒体下架时通知文章微服务。 kafka概述 kafka环境搭建 docker pull zookeeper:3.4.14 docker run -d --name zookeeper -p 2181:2181 zookeeper:3.4.14 安装kafka docker pull wurstmeister/kafka:2.12-2.3.1 docker run -d --name kafka…

代码随想录算法训练营第四十五天| 70.爬楼梯(进阶)、322.零钱兑换、279.完全平方数

代码随想录算法训练营第四十五天| 70.爬楼梯&#xff08;进阶&#xff09;、322.零钱兑换、279.完全平方数 题目 70.爬楼梯&#xff08;进阶&#xff09; 57.爬楼梯&#xff08;第八期模拟笔试&#xff09; https://kamacoder.com/problempage.php?pid1067 题目描述 假设…

【C++PCL】点云处理DBSCAN点云聚类分割

作者:迅卓科技 简介:本人从事过多项点云项目,并且负责的项目均已得到好评! 公众号:迅卓科技,一个可以让您可以学习点云的好地方 本专栏特色:根据经验和大家分享每个参数的调试规范,解决大家因为参数的问题而产生的苦恼。 目录 1.原理介绍 2.代码效果 3.源码展示

后台管理系统: spu管理模块

spu管理模块业务 spu 可以理解为类 例如 people类【spu】 sku可以理解为实例 例如&#xff1a;小明 18 男 spu跟sku可以理解为类跟多个实例的关系 spu管理模块静态 <template><div><el-card style"margin: 20px 0px"><CategorySelect get…

ARM安装与项目结构

1. 安装环境 参考E:\peixunQianrushi\arm\ziliao\FS4412新版&#xff08;学生资料&#xff09;\环境相关资料 这边建议全部默认路径 安装注意事项&#xff1a; 1、在接下来的安装过程中&#xff0c;对于使用win10、win8的操作系统的用户&#xff0c;所有的安装请均以管理员身份…

POKT Network (POKT) :进军百亿美元市场规模的人工智能推理市场

POKT Network&#xff08;又称 Pocket Network&#xff09;是一个去中心化的物理基础设施网络&#xff08;DePIN&#xff09;&#xff0c;它能够协调并激励对任何开放数据源的访问&#xff0c;最初专注于向应用程序和服务提供商提供区块链数据。 自 2020 年主网上线以来&#x…

第十五章 : Spring Cloud全链路监控(Pinpoint实战)

第十五章 : Spring Cloud全链路监控(Pinpoint实战) 前言 本章知识点: Pinpoint的发展历程、特点、优势以及整体架构;数据结构以及对集成框架的兼容性以及Pinpoint实战。 Springboot 2.3.12.RELEASE,spring cloud Hoxton.SR12,spring cloud alibaba 2.2.9.RELEASE发展历…

【GitHub项目推荐--推荐 5 个炫炫炫的可视化项目】【转载】

数据可视化就是将抽象的数据通过视觉的方式进行展示&#xff0c;能让用户直观的看到数据中蕴含的信息和规律。 本篇文章&#xff0c;整理了 5 个可视化开源项目&#xff0c;其中包括可视化制作低代码平台、大屏可视化、地图可视化、热图、图标可视化等等。 00. 数据大屏可视化…

Rust基础语法1

所有权转移&#xff0c;Rust中没有垃圾收集器&#xff0c;使用所有权规则确保内存安全&#xff0c;所有权规则如下&#xff1a; 1、每个值在Rust中都有一个被称为其所有者&#xff08;owner&#xff09;的变量&#xff0c;值在任何时候只能有一个所有者。 2、当所有者离开作用域…

WordPress微信一键关注免认证登录插件

插件介绍 WordPress微信免认证快捷登录插件&#xff1a;订阅号也能一键通行 这款WordPress插件专为个人用户打造&#xff0c;无需繁琐的服务号申请与认证流程。即使您只有未认证的订阅号&#xff0c;也能轻松实现关注公众号后一键登录网站的功能&#xff01; 配置步骤简单明…

【算法详解】力扣88.合并两个有序数组

一、题目介绍 给你两个按 非递减顺序 排列的整数数组 nums1 和 nums2&#xff0c;另有两个整数 m 和 n &#xff0c;分别表示 nums1 和 nums2 中的元素数目。 请你 合并 nums2 到 nums1 中&#xff0c;使合并后的数组同样按 非递减顺序 排列。 注意&#xff1a;最终&#xf…

动态规划基础(二)最长公共子序列 LCS

讲解求两个串中最长的公共的子序列长度或输出子序列等 poj1458 题目大意 给定两个字符串&#xff0c;要求输出两个字符串中最长公共子序列长度 思路 我们定义 a [ i ] [ j ] a[i][j] a[i][j]为&#xff0c;当字串 s t r 1 str1 str1到 i i i位置&#xff0c;字串 s t r 2 s…

采埃孚: 优化1/4员工;苹果Vision Pro开抢,黄牛9万一台 ;招商银行:2023年净利润1466亿元

今日精选 • 采埃孚: 优化1/4员工• 苹果Vision Pro开抢&#xff0c;黄牛9万一台• 招商银行&#xff1a;2023年净利润1466亿元&#xff0c;同比增长6.22% 科技动态 • OpenAI CEO 拟募集百亿级美元&#xff0c;建立 AI 芯片工厂网络以满足需求• 中西医结合“数智岐黄”大模…