vue中router-link和a的使用和区别

已于 2022-08-21 10:49:03 修改
阅读量2.1k 收藏 3
点赞数
分类专栏： a router-link 文章标签： vue.js 前端 javascript
于 2022-08-19 17:10:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47746653/article/details/126427329
版权

相同:router-link和a都能路由跳转

区别:

  1. router-link是vue中vue-router插件中的一个组件,通过配置to属性实现路由跳转;a是html中标签,通过配置href实现路由跳转.
  2. vue中使用router-link属于声明式路由导航,a属于编程式路由导航

声明式路由导航和编程式路由导航

声明式路由导航:在标签中就可以实现路由跳转,可以通过配置属性携带参数 

编程式路由导航:通过触发事件进行路由跳转, 路由跳转前可进行逻辑和参数配置,使跳转更健壮

项目使用:router-link(简单方便) 和a(灵活高效)

问题:当我们用router-link组件去完成上面的页面模块时,会存在上百个router-link组件,大量的组件会增加vue的工作,降低性能.

解决:a标签替代router-link组件,使用编程式路由导航,通过事件触发跳转,减少组件的生成,提升性能

濤啊
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
＜a＞和＜router-link＞区别
weixin_47049504的博客
08-15 1164
两种方式编译后的代码，除了元素的文本不一样外，在关键信息href都是一样的。 <a>进行跳转，页面会重新渲染，即相当于打开一个新的页面；<router-link>组件避免了不必要的重复渲染，他只更新变化的部分从而减少DOM性能消耗。 <a> <a> 可以通过他的 href 属性创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。 <a> 属性 href 创建超链接： <a href='/index
vue-router params与query使用及区别
黑山老妖的小站
08-15 1157
前置知识 url的语法 大多数的url都是由9个部分组成 <scheme>://<user>:<password>@<host>:<port>/<path><params>?<query>#<frag> scheme方案名称即协议名称,表示用哪种协议访问服务器，如http、https user用户：某些方案访问资源时需要的用户名，有些服务器要求输入用户名密码才会允许用户访问数据，如ftp pass
【八股系列】react-router里的Link标签和a标签有什么区别？
最新发布
to_the_Future的博客
05-21 392
react-router里的Link标签和a标签有什么区别？
vue的router-link和a标签的本质区别
weixin_51281654的博客
06-18 1116
router-link会自动渲染成一个<a>标记，以便默认情况下，通过它可以在应用程序的路由之间进行导航。2）在router-link中，通过router-link进行跳转并不会跳转到新的页面，也不会重新渲染，它会选择路由所指的组件进行渲染，避免重复渲染。a标签是HTML中的标签，用于创建链接。1）在a标签中，点击a标签会从当前页面跳转到另一个页面，通过a标签跳转，页面就会重新加载，相当于重新打开了一个网页。总而言之，通过a标签和router-link对比，router-link避免了重复渲染。
vue-router 中 router-link 与 a 标签的区别
心碎烤肠的博客
04-14 586
vue-router 中 router-link 与 a 标签的区别
vue中router-link和传统a链接的区别
热门推荐
saber的博客
07-24 1万+
Vue-router是伴随着Vue框架出现的路由系统，它也是公认的一种优秀的路由解决方案。在使用Vue-router时候，我们常常会使用其自带的路径跳转组件Link,通过实现跳转，这和传统的何其相似！但它们到底有什么具体的区别呢？ 官方中给出的解释是这样的： <router-link> 比起写死的 <a href="..."> 会好一些，理由如下： 无论是 HTML5...
详谈vue中router-link和传统a链接的区别
10-15
在Vue.js开发中，Vue Router是常用的路由管理系统，它与传统的HTML `<a>` 标签有着显著的区别。`<router-link>` 是Vue Router提供的一个组件，用于在应用中实现平滑的导航。下面将详细探讨这两者的差异。 首先，`...
vue router-link 默认a标签去除下划线的实现
01-18
我就废话不多说了，大家还是直接看例子吧~ .router-link-active{ ...以上这篇vue router-link 默认a标签去除下划线的实现就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网
vue router-link传参以及参数的使用实例
08-28
值得注意的是，`router-link`的`:to`属性可以接收一个字符串或者一个对象，这里我们使用的是对象形式，这样可以同时设置路径和查询参数。如果`:to`是一个字符串，那么格式必须是`'/test/id'`，在这种情况下，Vue ...
详解vue-router 2.0 常用基础知识点之router-link
12-09
总结起来，Vue Router 2.0 中的`router-link`、`$route.params`、`$route.query`和`meta`属性都是构建动态路由和处理导航的重要工具。它们使我们能够灵活地管理应用中的页面跳转和数据传递，同时提供了一种方式来...
React Router中link标签和a标签的区别
cx18333的博客
06-09 800
在 React Router 中，`` 组件是用来处理路由导航的，它会生成一个可以点击的链接，并根据配置的路由规则更新应用程序的 URL。而 `` 标签是 HTML 中的原生链接元素，通过 href 属性指定链接的目标 URL，点击时会直接跳转到该 URL。
17.react-router里的Link标签和a标签的区别是什么
宋坚强大大~~
09-20 921
区别是： Link标签是react-router里实现路由跳转的链接，一般配合Route使用，react-router接下了a标签的默认链接跳转行为，区别于传统的页面跳转，Link标签的"跳转"行为只会触发相匹配的Route对应的页面内容更新，而不会刷新整个页面。从最终渲染的DOM来看，这两者都是链接，都是a标签。附：a标签默认事件禁掉之后做了什么才实现了跳转？
声明式导航＜router-link＞：解决a标签自带的默认样式
YY的博客
11-30 4220
声明式导航原理
react-router 里的 Link 标签和 a 标签有什么区别？
zhangwenok的博客
10-08 2382
Link> 是 react-router 里实现路由跳转的链接，一般配合 使用，react-router 会接管Link 的默认链接跳转行为，区别于传统的页面跳转， 的“跳转”行为只会触发相匹配的 对应的页面内容更新，而不会刷新整个页面。而 标签就是普通的超链接了，用于从当前页面跳转到 href 指向的另一个页面（非锚点情况）。从最终渲染的 DOM 来看，这两者都是链接，都是 标签。跳转链接的路径，如 /users/123。
router路由与 a 标签超链接的区别
weixin_44867717的博客
10-21 1629
router路由与 a 标签超链接的区别 1、 什么是路由？ 路由是根据不同的URL来展示不同的内容或页面； 前端路由就是把不同路由对应的不同页面或内容的展示交给前端来做（真正实现前后端分离），以前都是通过服务器端来根据URL的不同返回不同的页面，那些页面在服务端都是实实在在存在的，而前端路由就是只有一个index，其余页面是根据组件等进行渲染的，虚拟页面。 2、前端路由的优缺点？ 优点：用户体验好，不是每次都需要从服务器全部获取，快速展示给用户。 缺点： 不利于SEO 使用浏览器的前进后退功能是会重新发
vue中router-link和router-view各自起到什么作用
11-29
在Vue中，`router-link`和`router-view`是Vue Router提供的两个重要组件，用于实现SPA（单页应用）的路由功能。 `router-link`组件用于生成页面中的链接，可以通过`to`属性指定链接的目标地址，当用户点击链接时，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值