router-link 中的 "tag" 属性如何工作?

How does the "tag" attribute in router-link work?

我有这两个 router-links,一个包含在 li 元素中,另一个应用了 tag="li" 属性:

<router-link tag="li" :to="{ name: 'work'}">Work</router-link
<li><router-link :to="{ name: 'news'}">News</router-link></li>

在浏览器中编译如下:

router-linktag属性是为了取代html elements而设计的吗?浏览器(SEO 等)会以相同的方式识别这两个链接吗?我想用 tag 属性 缩短我的 html 但不知道是否应该。

如果你使用的是没有SSR(服务器端渲染)的Vue,那就不用考虑了。

而且我找到了一些关于它的信息 https://router.vuejs.org/guide/migration/#removal-of-event-and-tag-props-in-router-link

我认为它们只是包装器,这就是为什么删除并说使用插槽的原因。

tag Vue Router 4 中的 does not exist 属性(这是目前唯一可以与 Vue 3 一起使用的路由器版本)

它的意思是用不同的东西替换 a。但是,由于 li 不能具有 href 属性,所以将 <a> 包含在 <li> 中是您最好的选择