Vue中router-link配置target未生成到HTML代码的问题排查

这个问题我之前也碰到过，核心原因是你把target属性放错位置啦！

问题所在 #

你在router-link的props对象里定义了target: '_blank'，但router-link组件本身并没有将target作为它的组件props来接收。target是<a>标签的原生HTML属性，这类属性不能通过组件props传递，而是需要绑定到渲染后的根元素上。

修正后的代码 #

把target移到attrs对象中即可解决问题：

render: (h, params) => {
  return h( 'router-link', {
    props: {
      tag: 'a',
      to: { 
        name: 'physicalserverDetails', 
        query: {id: params.row.id} 
      },
    },
    attrs: {
      target: '_blank' // 原生HTML属性放在attrs里
    }
  }, params.row.name )
}

原理说明 #

在Vue的h（createElement）函数中：

• props对象用于传递组件自身定义的属性（比如router-link的to、tag这些官方文档中明确列出的props）
• attrs对象用于传递原生HTML属性，这些属性会直接绑定到组件渲染出的根DOM元素上（这里就是<a>标签）

这样修改后，生成的HTML就会包含target="_blank"属性，点击链接也会在新窗口打开了。

内容的提问来源于stack exchange，提问作者user7693832