＜a＞和＜router-link＞区别

已于 2022-03-07 17:52:50 修改
阅读量1.1k 收藏 2
点赞数
分类专栏： web基础知识 文章标签： html5
于 2021-08-15 15:29:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47049504/article/details/119713151
版权
本文探讨了HTML5中的<a>标签和Vue.js中的<router-link>组件的区别。<a>标签用于创建超链接，支持相对、绝对路径及邮件、电话链接，而<router-link>专用于路由应用中的导航，通过to属性定义目标路由，并可通过replace属性避免添加历史记录。此外，<router-link>的tag属性允许自定义渲染标签。
摘要由CSDN通过智能技术生成

两种方式编译后的代码，除了元素的文本不一样外，在关键信息href都是一样的。

<a>进行跳转，页面会重新渲染，即相当于打开一个新的页面；<router-link>组件避免了不必要的重复渲染，他只更新变化的部分从而减少DOM性能消耗。

<a>

<a> 可以通过他的 href 属性创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。

<a> 属性

href

创建超链接：

<a href='/index.html'>相对链接</a>

<a href='http://www.xxx.com'>外部链接</a>

将图像作为链接：<a href='https://www.xxx.com'><img src='/xx.png' /></a>

链接到同一个页面的不同位置：<a href='#id'></a>

创建电子邮件链接：<a href='mailto:'></a>

创建电话链接：<a href='tel:+123456'></a> 

可以使用 href="#top" 或者 href="#" 链接返回到页面顶部。

tartget


                

        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  我爱语文
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
详谈vue中router-link和传统a链接的区别

				
			

			

				

					10-15
				

			

		

		

			
				
主要介绍了详谈vue中router-link和传统a链接的区别，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

			
		

	



                

              
                



	

		

			

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

				
			

			

				

					qq_45632139的博客
				

				

					05-25
					
					3936
					
				

			

		

		

			
				
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-

			
		

	



                


  
              

                


	

		

			

				
					
vue的超链接使用示例：a 和 router-link

					
最新发布

				
			

			

				

					大剑师兰特的GIS世界
				

				

					07-08
					
					1416
					
				

			

		

		

			
				
在 Vue.js 中，你可以使用 `` 标签结合 `v-bind:href`（或简写为 `:href`）指令来创建超链接。这允许你动态地绑定 URL 到超链接，URL 可以是数据属性或者表达式的值。

			
		

	





	

		

			

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

				
			

			

				

					weixin_47746653的博客
				

				

					08-19
					
					2208
					
				

			

		

		

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

			
		

	



		

			
		



	

		

			

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

				
			

			

				

					心碎烤肠的博客
				

				

					04-14
					
					687
					
				

			

		

		

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

			
		

	





	

		

			

				
					
vue2脚手架，如何在轮播图中用<router-link></router-link>代替<a></a>

				
			

			

				

					06-09
				

			

		

		

			
				
在 Vue 2 的脚手架中，你可以通过以下步骤在轮播图中使用 `<router-link>`：  1. 首先，在你的 Vue 组件中导入 `...这样，你就可以在 Vue 2 的脚手架中使用 `<router-link>` 替代 `<a>`，实现轮播图的路由导航了。

			
		

	





	

		

			

				
					
<a>组件和<router-link>组件的target属性

				
			

			

				

					05-12
				

			

		

		

			
				
而 `<router-link>` 组件是 Vue Router 提供的组件，用于在 Vue 应用程序中创建导航链接，它的 `target` 属性是用于指定链接打开的位置。常用的取值有：  - `_self`：在当前窗口中打开链接； - `_blank`：在一个新...

			
		

	





	

		

			

				
					
轮播图中放<router-link></router-link>代替<a>可以吗

				
			

			

				

					06-09
				

			

		

		

			
				
它会自动添加路由的路径到 `href` 属性中，并且在单击时通过 Vue Router 路由到对应的页面，因此可以替换 `<a>` 标签。例如，在 Vue.js 中，可以这样使用 `<router-link>`:  ```html <router-link to="/about">About...

			
		

	





	

		

			

				
					
vue中router-link和传统a链接的区别

				
			

			

				

					hsany330的专栏
				

				

					05-06
					
					511
					
				

			

		

		

			
				
Vue-router是伴随着Vue框架出现的路由系统，它也是公认的一种优秀的路由解决方案。在使用Vue-router时候，我们常常会使用其自带的路径跳转组件Link,通过实现跳转，这和传统的何其相似！但它们到底有什么具体的区别呢？

官方中给出的解释是这样的：
<router-link> 比起写死的 <a href="..."> 会好一些，理由如下：

无论是 HTML5 history 模式还是 hash 模式，它的表现行为一致，所以，当你要切换路由模式，或者在 IE9 降级使用 

			
		

	





	

		

			

				
					
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标签有什么区别？

				
			

			

				

					to_the_Future的博客
				

				

					05-21
					
					441
					
				

			

		

		

			
				
react-router里的Link标签和a标签有什么区别？

			
		

	





	

		

			

				
					
React Router中link标签和a标签的区别

				
			

			

				

					cx18333的博客
				

				

					06-09
					
					854
					
				

			

		

		

			
				
在 React Router 中，`` 组件是用来处理路由导航的，它会生成一个可以点击的链接，并根据配置的路由规则更新应用程序的 URL。而 `` 标签是 HTML 中的原生链接元素，通过 href 属性指定链接的目标 URL，点击时会直接跳转到该 URL。

			
		

	





	

		

			

				
					
router路由与 a 标签超链接的区别

				
			

			

				

					weixin_44867717的博客
				

				

					10-21
					
					1692
					
				

			

		

		

			
				
router路由与 a 标签超链接的区别
1、 什么是路由？
路由是根据不同的URL来展示不同的内容或页面；
前端路由就是把不同路由对应的不同页面或内容的展示交给前端来做（真正实现前后端分离），以前都是通过服务器端来根据URL的不同返回不同的页面，那些页面在服务端都是实实在在存在的，而前端路由就是只有一个index，其余页面是根据组件等进行渲染的，虚拟页面。
2、前端路由的优缺点？
优点：用户体验好，不是每次都需要从服务器全部获取，快速展示给用户。
缺点：

不利于SEO
使用浏览器的前进后退功能是会重新发

			
		

	





	

		

			

				
					
router-link标签

				
			

			

				

					远方不远
				

				

					09-30
					
					1880
					
				

			

		

		

			
				
router-link标签

在vue1.0版本中的仍然用a标签来实现链接跳转功能，但链接地址与html中不同，它是采用v-link属性来控制。但是在2.0版本中a标签就被替换成了rount-link属性，但是最终在页面上显示还是会被渲染成a标签。接下来将要详细的介绍该属性中的各个值的用法

router-link属性值详解

（1）":to" 属性值

这个属性值就相当于a标签中的"herf"属性，后面的内容为跳转链接的内容


```<router-link :to="http://www.gxl

			
		

	





	

		

			

				
					
react-router 里的 Link 标签和 a 标签有什么区别？

				
			

			

				

					zhangwenok的博客
				

				

					10-08
					
					2435
					
				

			

		

		

			
				
Link> 是 react-router 里实现路由跳转的链接，一般配合  使用，react-router 会接管Link 的默认链接跳转行为，区别于传统的页面跳转， 的“跳转”行为只会触发相匹配的  对应的页面内容更新，而不会刷新整个页面。而  标签就是普通的超链接了，用于从当前页面跳转到 href 指向的另一个页面（非锚点情况）。从最终渲染的 DOM 来看，这两者都是链接，都是  标签。跳转链接的路径，如 /users/123。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值