vue-router 中 router-link 与 a 标签的区别

文章目录

前言

a标签定义

router-link定义

总结


前言

vue-router 中 router-linka 标签的区别 

a标签定义

<a> 标签定义超链接,用于从一张页面链接到另一张页面。

从一张页面跳转到另一张页面,但从这里来说就违背了多视图的单页Web应用这个概念。

通过a标签进行跳转,页面会被重新渲染,即相当于重新打开一个新的网页,体现为视觉上的“闪烁”(如果是本地的项目基本看不出来)

router-link定义

<router-link> 组件支持用户在具有路由功能的应用中 (点击) 导航。 通过 to 属性指定目标地址,可以通过配置 tag 属性生成别的标签.。

通过 router-link 进行跳转不会跳转到新的页面,也不会重新渲染,它会选择路由所指的组件进行渲染,避免了重复渲染的“无用功”。

总结

  对比<a>,router-link 组件避免了不必要的重渲染,它只更新变化的部分从而减少DOM性能消耗

Vue的创新之处在于,它利用虚拟 DOM 的概念和 diff 算法实现了对页面的"按需更新",Vue-router很好地继承了这一点,重渲染是我们不希望看到的,因为无论跳转到哪个页面,只需要渲染一次就够了。反观<a>标签,每次跳转都得重渲染一次。

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

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

相关文章

HarmonyOS开发实例:【分布式数据服务】

介绍 分布式数据服务(Distributed Data Service&#xff0c;DDS)为应用程序提供不同设备间数据分布式的能力。通过调用分布式数据接口&#xff0c;应用程序将数据保存到分布式数据库中。通过结合帐号、应用和分布式数据服务对属于不同的应用的数据进行隔离&#xff0c;保证不同…

用海豚调度器定时调度从Kafka到HDFS的kettle任务脚本

在实际项目中&#xff0c;从Kafka到HDFS的数据是每天自动生成一个文件&#xff0c;按日期区分。而且Kafka在不断生产数据&#xff0c;因此看看kettle是不是需要时刻运行&#xff1f;能不能按照每日自动生成数据文件&#xff1f; 为了测试实际项目中的海豚定时调度从Kafka到HDF…

四川易点慧电子商务抖音小店打造便捷生活新体验

随着互联网的迅猛发展&#xff0c;电子商务已经深入到人们生活的方方面面。在这个大背景下&#xff0c;四川易点慧电子商务抖音小店应运而生&#xff0c;凭借其独特的魅力和创新模式&#xff0c;迅速在电商领域崭露头角&#xff0c;成为了众多消费者追逐的焦点。 抖音小店作为新…

HTML5+CSS3小实例:菜单按钮的三种切换动画

实例:菜单按钮的三种切换动画 技术栈:HTML+CSS 效果: 源码: 【HTML】 <!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initia…

Verilog仿真跨模块调用内部信号的方法

在Verilog仿真时如果需要调用某子模块中的信号在本模块中使用可以使用层次化引用的方法&#xff0c;而不需要在rtl部分用端口引出来。 引用方式&#xff1a;当前例化模块名.子例化模块名.子子例化模块名.参数 将需要的信号引出。 注意是用例化模块名而不是用子模块名&#xff…

Element——组件

element官网 https://element.eleme.cn/#/zh-CN/component/layout vscode格式化快捷键&#xff1a;shiftaltf table表格 <template><el-table:data"tableData"style"width: 100%"><el-table-columnprop"date"label"日期…

docker安装clickhouse数据库

1.创建目录 mkdir -p /data/clickhouse/data mkdir -p /data/clickhouse/conf mkdir -p /data/clickhouse/log2.拉取镜像 docker pull clickhouse/clickhouse-server3.创建临时容器 docker run -d --rm --name clickhouse-server --ulimit nofile262144:262144 clickhouse/c…

git出现错误 fail to push some refs to “xxx“

问题产生原因&#xff1a;根据测试猜测造成这一错误的原因是在码云的远程仓库上删除了一个文件,本地没有pull下来,直接进行了commit,commit到本地仓库后,如果在pull下来,也是无法提交的 问题解决办法: 使用 git pull --rebase,拉取远程仓库,并将本地仓库新的提交作为最顶层的提…

Postman之全局变量与环境变量配置

实际开发中可能需要不停切换环境&#xff0c;接口中来回输入环境地址比较麻烦&#xff0c;故而通过定义变量来节约频繁更换测试地址所耗费的时间。Postman 允许定义自己的全局变量&#xff08;Globals&#xff09;与环境变量&#xff08;Environment&#xff09;&#xff0c;最…

Stable Diffusion WebUI 控制网络 ControlNet 插件实现精准控图-详细教程

本文收录于《AI绘画从入门到精通》专栏&#xff0c;专栏总目录&#xff1a;点这里&#xff0c;订阅后可阅读专栏内所有文章。 大家好&#xff0c;我是水滴~~ 本文主要介绍 Stable Diffusion WebUI 一个比较重要的插件 ControlNet&#xff08;控制网络&#xff09;&#xff0c;主…

基于go+vue的多人在线聊天的im系统

基于govue的多人在线聊天的im系统 文章目录 基于govue的多人在线聊天的im系统一、前端部分二、后端部分1、中间件middleware设计jwt和cors2、配置文件设计3、Mysql和Redis连接4、路由设计5、核心功能设计 一、前端部分 打算优化一下界面&#xff0c;正在开发中。。。 二、后端…

Realsense D455 调试

1 Realsense D455 配置&#xff1a; RGB&#xff1a;彩色相机&#xff0c;FOV&#xff08;h&#xff0c;v&#xff09;&#xff08; 90*65 &#xff09;红外点阵发射&#xff1a;位于上图中RGB右边&#xff0c;发射特定模式的红外光&#xff0c;通常是一种点阵图案&#xff0c…

React + 项目(从基础到实战) -- 第八期

ajax 请求的搭建 引入mockAP接口设计AJAX 通讯 前置知识 HTTP 协议 , 前后端通讯的桥梁API : XMLHttpRequest 和 fetch常用工具axios mock 引入 Mock.js (mockjs.com) 使用 mockJS 前端代码中引入 mockJs定义要模拟的路由 , 返回结果mockJs 劫持ajax请求(返回模拟的结果)…

记一次kafkakerberos认证问题

1&#xff0c;报错信息 排查思路&#xff1a;检查kerberos配置文件 kerberos.kafka.principalkafka/huawe_baseSECURITY.COM kerberos.kafka.keytabPath/etc/huawe_base.keytab kerberos.kafka.krb5ConfPath/etc/krb5.conf但是查看kafka_client_jass.conf文件&#xff0c;发现…

LoRA模型是什么?

AI Agent能力评测工具AgentBench评测结果 LoRA模型是什么&#xff1f; LoRA模型&#xff08;Low-Rank Adaptation of Large Language Models&#xff09;是一种针对大型语言模型&#xff08;LLMs&#xff09;的微调技术&#xff0c;其目的是在保持模型原有性能的基础上&#x…

数据库服务的运行与登录

打开数据库服务 数据库服务: SQL Server(MSSQLServer) 运行在服务器端的应用程序, 提供数据的存储 / 处理和事务等在使用DBMS的客户端之前必须首先打开该服务 客户端连接到服务器 关于客户端 / 服务器端的说明 客户端 : 数据库管理系统(DBMS), 应用程序服务器端 : 安装的数据…

深澜计费管理系统 /demo/proxy存在任意文件读取漏洞

声明&#xff1a; 本文仅用于技术交流&#xff0c;请勿用于非法用途 由于传播、利用此文所提供的信息而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;文章作者不为此承担任何责任。 简介 深澜计费管理系统是一款用于网络设备计费管理的软件…

nginx部署上线

1. windows配置nginx 打包命令 npm run build:prod 1. 安装 nginx mac windows 2. mac / windows 环境下ngnix部署启动项目 2. nginx 解决 history 的 404 问题 3. nginx配置代理解决生产环境跨域问题

元宇宙-虚拟世界的安全风险如何应对

元宇宙&#xff08;Metaverse&#xff09;是一个虚拟时空间的集合&#xff0c;由一系列的增强现实&#xff08;AR&#xff09;、虚拟现实&#xff08;VR&#xff09;和互联网&#xff08;Internet&#xff09;所组成。这个虚拟时空间是一个持续存在的、由众多虚拟世界互相连接而…

链表OJ - 5(合并两个有序链表)

题目描述&#xff08;来源&#xff09; 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 思路 需创建一个头结点&#xff0c;然后从两个链表的表头开始依次比较传入的两个链表的结点的大小&#xff0c;并将两个链表中较小的…