Vue Router/iView BreadcrumbItem跳转外部网站异常求助

嘿，这个坑我之前踩过！你遇到的问题是因为iView的BreadcrumbItem组件的to属性，默认是和Vue Router的router-link逻辑一致的——它只会处理内部路由路径，不会识别外部URL，所以才会把https://github.com当成路由路径拼到当前页面的URL后面，导致跳转异常。

给你两个简单的解决方案：

方案一：用原生<a>标签嵌套（最简便） #

直接把图标放在原生的<a>标签里，嵌套进BreadcrumbItem就行，原生a标签会自动处理外部链接跳转：

<BreadcrumbItem>
  <a href="https://github.com" target="_blank">
    <Icon type="social-github"></Icon>
  </a>
</BreadcrumbItem>

注：target="_blank"是让链接在新窗口打开，如果你想在当前窗口跳转，去掉这个属性就行。

方案二：手动绑定点击事件跳转 #

如果一定要通过组件的点击逻辑处理，可以给BreadcrumbItem绑定点击事件，手动触发外部跳转：

<BreadcrumbItem @click="navigateToGithub">
  <Icon type="social-github"></Icon>
</BreadcrumbItem>

然后在Vue组件的methods里添加跳转逻辑：

methods: {
  navigateToGithub() {
    // 当前窗口跳转
    window.location.href = 'https://github.com';
    // 或者新窗口打开：window.open('https://github.com', '_blank')
  }
}

推荐用第一种方案，不需要额外写JS逻辑，直接利用原生标签的特性就能解决问题~

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