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-link
的tag
属性是为了取代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>
中是您最好的选择
我有这两个 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-link
的tag
属性是为了取代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>
中是您最好的选择