vue的router-link和a标签的本质区别

最新推荐文章于 2024-07-08 00:30:00 发布
最新推荐文章于 2024-07-08 00:30:00 发布
阅读量3.9k 收藏 12
点赞数 1
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45632139/article/details/106325737
版权

a标签和router-link

a标签

<a href="">链接 </a>

router-link

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

a标签

点击a标签从当前页面跳转到另一个页面
通过a标签跳转，页面就会重新加载，相当于重新打开了一个网页

router-link

通过router-link进行跳转不会跳转到新的页面，不会重新渲染，它会选择路由所指的组件进行渲染

总结

通过a标签和router-link对比，router-link避免了重复渲染，不像a标签一样需要重新渲染减少了DOM性能的损耗

参考博客:
https://blog.csdn.net/saber04/article/details/96717294

rennan…
关注
专栏目录
vue2（6）之声明式导航router-link类名&传参/路由重定向/路由两种模式hash&history/编程式导航路径跳转&传参/案例面经基础版/vueCli自定义创建项目/eslint
qq_66318904的博客
05-06 717
router-link的两个高亮类名 太长了，我们希望能定制怎么办声明式导航跳转时, 有几种方式传值给路由页面？查询参数传参（多个参数）动态路由传参（一个参数，优雅简洁）keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件中。在组件切换过程中把切换出去的组件保留在内存中防止重复渲染DOMApp.vue
二、Vue Router-核心内容精讲
qq_41994396的博客
05-07 263
Vue Router 一、Vue Router 回顾 1、路由简介 路由是一个比较广义和抽象的概念，路由的本质就是对应关系。 在开发中，路由分为： ​ 后端路由 ​ 前端路由 后端路由 概念：根据不同的用户 URL 请求，返回不同的内容 本质：URL 请求地址与服务器资源之间的对应关系 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0FUADVcu-1683296278715)(images/后端路由.png)] SPA（Single Page App
＜a＞和＜router-link＞区别
weixin_47049504的博客
08-15 1182
两种方式编译后的代码，除了元素的文本不一样外，在关键信息href都是一样的。 <a>进行跳转，页面会重新渲染，即相当于打开一个新的页面；<router-link>组件避免了不必要的重复渲染，他只更新变化的部分从而减少DOM性能消耗。 <a> <a> 可以通过他的 href 属性创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。 <a> 属性 href 创建超链接： <a href='/index
vue的超链接使用示例：a 和 router-link
最新发布
大剑师兰特的GIS世界
07-08 1383
在 Vue.js 中，你可以使用 `` 标签结合 `v-bind:href`（或简写为 `:href`）指令来创建超链接。这允许你动态地绑定 URL 到超链接，URL 可以是数据属性或者表达式的值。
vue中router-link和a的使用和区别
weixin_47746653的博客
08-19 2207
vue中router-link和a的使用和区别
详谈vue中router-link和传统a链接的区别
10-15
主要介绍了详谈vue中router-link和传统a链接的区别，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue-router 中 router-link 与 a 标签的区别
心碎烤肠的博客
04-14 685
vue-router 中 router-link 与 a 标签的区别
vue-router详解
Chil_G的博客
09-15 646
目录 认识路由 vue-router基本使用 vue-router嵌套路由 vue-router参数传递 vue-router导航守卫 keep-alive 认识路由 什么是路由？ 说起路由你想起了什么？ 路由是一个网络工程里面的术语。 路由（routing）就是通过互联的网络把信息从源地址传输到目的地址的活动. --- 维基百科 在生活中, 我们有没有听说过路由的概念呢? 当然了, 路由器嘛. 路由器是做什么的? 你有想过吗? 路由器提供了两种机制: 路由和转送. 路由是决定数据
vue router使用--笔记三
u012274988的博客
03-21 1441
1：安装 2：引入使用步骤 在挂载点内，使用<router-link>和<router-view>两个标签实现链接和展示。其中to的参数，来源于vuex中对路由的定义。每个路由对应一个组件。组件可以直接使用组件定义对象，也可以通过import引入组件的定义文件进而形成组件对象。注意若像下面使用template方式定义组件的化，需要配置使用vue的compiler，不然会包runtime错误。 如此，我们可以在任何组件内通过this.$router访问路由器...
Vue -- vue-router(路由)基本配置
weixin_47081743的博客
12-20 1396
文章目录一、路由的概述1.1 路由是什么？1.2 生活中的路由器二、路由的阶段2.1 后端路由阶段2.1.1 什么是后端渲染?2.1.2 什么是后端路由? 一、路由的概述 1.1 路由是什么？ 路由是一个网路工程术语;路由（routing）是指分组从源到目的地时，决定端到端路径的网络范围的进程 [1] 。路由工作在OSI参考模型第三层——网络层的数据包转发设备。 — 百度百科 路由就是通过互联网的网络把信息从原地址传输到目的地的活动. — 维基百科 1.2 生活中的路由器 路由器通过转发数据包来实现网
【八股系列】react-router里的Link标签和a标签有什么区别？
to_the_Future的博客
05-21 439
react-router里的Link标签和a标签有什么区别？
vue中router-link和传统a链接的区别
热门推荐
saber的博客
07-24 1万+
Vue-router是伴随着Vue框架出现的路由系统，它也是公认的一种优秀的路由解决方案。在使用Vue-router时候，我们常常会使用其自带的路径跳转组件Link,通过实现跳转，这和传统的何其相似！但它们到底有什么具体的区别呢？ 官方中给出的解释是这样的： <router-link> 比起写死的 <a href="..."> 会好一些，理由如下： 无论是 HTML5...
react-router里的Link标签 和 a 标签有什么区别？
JJWanna的博客
12-01 2092
react-router里的Link标签 和 a 标签有什么区别？？ 从最终渲染的Dom来看，两者都是链接，都是标签，区别是： 是react-router里实现路由跳转的链接，一般配合使用，react-router 接管了其默认的链接跳转行为，区别去传统的页面跳转，的”跳转”行为只会触发相匹配的对应的页面内容更新，而不会刷新整个页面。 做了三件事情： 1.有onclick那就执行onclick 2.click的时候阻止a标签默认事件 3.根据跳转href(即是to )，用history（web前端路由两种
React Router中link标签和a标签的区别
cx18333的博客
06-09 846
在 React Router 中，`` 组件是用来处理路由导航的，它会生成一个可以点击的链接，并根据配置的路由规则更新应用程序的 URL。而 `` 标签是 HTML 中的原生链接元素，通过 href 属性指定链接的目标 URL，点击时会直接跳转到该 URL。
Vue路由vue-router
weixin_30314813的博客
08-13 125
router介绍 router是一个被vue官方收纳的插件，在我们项目建完之后就会出现一个 router.js文件，我们只需要在这个文件下配置相应的路由，就可以实现 url与页面一一对应的关系 router配置 import About from "./views/About"; //先导入 Vue.use(Router); export default ne...
a标签 vue 动态点击_【Vue】Vue学习之动态组件
weixin_39983223的博客
12-28 183
在某些场景，往往需要我们动态切换页面部分区域的视图，这个时候内置组件component就显得尤为重要。 ---摘自《Vue.js从入门到项目实战》学习过动态组件过后，我来分享个人见解，希望可以帮到同样在学习Vue的朋友们。Vue是完全...
vue router-link 默认a标签去除下划线的实现
09-20
您可以使用CSS来去除Vue Router中`<router-link>`默认的下划线。通过给`<router-link>`添加一个自定义的class，并在CSS中设置该class的样式来实现去除下划线的效果。以下是实现的步骤： 1. 在`<router-link>`中添加一个自定义的class，例如`class="no-underline"`。 2. 使用CSS来设置该class的样式，去除下划线。 以下是一个示例： ```html <router-link to="/" class="no-underline">Home</router-link> ``` ```css .no-underline { text-decoration: none; } ``` 这样就可以去除`<router-link>`默认的下划线了。 请注意，您可以将
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值