Code前端首页关于Code前端联系我们

一、Router Link和普通a标签有啥不一样?

terry 5小时前 阅读数 10 #Vue
文章标签 Router Link;a标签

做Vue项目时,页面跳转离不开Router Link,但很多同学刚接触时一头雾水:它和普通a标签区别是啥?动态路由咋传参?激活样式咋调?遇到跳转没反应该咋排查?这篇文章把Router Link从基础用法到实战踩坑全拆清楚,新手能快速上手,老手也能补漏~

先搞懂“表面”和“内核”的区别:普通a标签是浏览器原生组件,点击后会整页刷新(比如从localhost:8080/page1跳到/page2,浏览器会重新请求服务器);而Router Link是Vue Router提供的前端路由组件,专门给单页应用(SPA)用的,点击后不会刷新页面,而是通过修改URL、匹配路由规则,渲染对应的组件(靠router-view实现)。

再看“内部渲染”:Router Link最终也会被渲染成a标签,但多了一堆路由逻辑,比如点击时会阻止a标签默认的跳转行为(不然又整页刷新了),还会自动处理“当前路由是否激活”的样式(activeClass),举个简单对比:

<!-- 普通a标签,整页刷新 -->
<a href="/about">关于我们</a>
<!-- Router Link,单页无刷新跳转 -->
<router-link to="/about">关于我们</router-link>

Router Link的to属性支持对象语法(传路由nameparamsquery),灵活性远超a标签的href,比如要传动态参数:

<router-link :to="{ name: 'user', params: { id: 123 }}">用户123</router-link>

Router Link基础用法:这些细节别踩坑

刚用Router Link时,最容易栽在to属性、特殊属性(replacetag)这些细节上,逐个拆解:

to属性的两种写法

to属性负责指定“跳转到哪”,有静态字符串动态对象两种写法:

  • 静态字符串:适合固定路径,比如联系我们,直接写死路径。
  • 动态对象:适合传参数、匹配路由name(比路径更稳定,路径改了name能不变),格式是{ name: '路由名', params: { 动态参数 }, query: { 查询参数 } },比如路由配置里有{ name: 'article', path: '/article/:id' },那传参可以写:
<router-link :to="{ 
  name: 'article', 
  params: { id: articleId }, // 对应动态路由/:id
  query: { tab: 'comment' } // 对应?tab=comment
}">文章详情</router-link>

这里要注意:params传的是动态路由参数(路径里的/:id),刷新页面后会丢失;query传的是查询参数(后面的),刷新不会丢,根据需求选传参方式~

replace属性:控制历史记录

默认情况下,点击Router Link会往浏览器历史记录里新增一条(比如从/page1/page2,返回能回到page1),加了replace后,会替换当前历史记录(返回时跳过当前页),场景:比如支付成功页,希望用户返回时直接回到订单列表,不用经过支付页,就可以加replace

<router-link to="/pay/success" replace>支付成功</router-link>

tag属性:把Router Link渲染成其他标签

默认Router Link渲染成a标签,但有时候需要渲染成

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

热门