如何让Vue RouteLink跳转到外链(其他网站)

背景

根据 百度谷歌, 我们知道如果要在Vue项目中跳转其他网站, 只能通过<a>标签, 而RouteLink组件只能跳转相对路径.

所以如果要跳转外链, 只能写死<a>, 但在我的项目中, Path是一个变量, 它可能是本网站(相对路径), 也可能是外链, 如http://baidu.com, 所以没办法再代码中写死用<a>或者<router-link>.

最后写出的代码可能是这样的:

<router-link v-if="path==='http://baidu.com'" :to="{path: path}">
这是子组件
</router-link>
<a v-else :href="path">
这是子组件
</a>

咋一看没问题, 但是会发生重复编写此子组件代码的问题, 不是最佳解决方案.

那么RouterLink组件到底能不能实现跳转外链呢? 官方文档没有说那就再翻看源码, 也发现并不能, 所有只有自己实现了.

编写一个可以跳转外链的RouterLink

方法1: 可以自己再实现一次RouterLink, 虽然代码量不多, 但也算是重复代码了, 我们希望代码越少越好.

方法2: 包装一次RouterLink, 代码如下.

<!--
支持外链的RouterLink, 只需要包装一次默认的router-link.
-->
<template>
  <!-- 以斜杠/开头的路径会被判定为内链, 否则是外链 你可以自己修改此逻辑 -->
  <a v-if="to.path && to.path[0] !== '/'" :href="to.path" :target="target">
    <slot></slot>
  </a>
  <router-link v-else v-bind="vProps">
    <slot></slot>
  </router-link>
</template>
<script>
  export default {
    name: 'XRouterLink',
    props: {
      to: {
        type: Object,
        default: {path: '/'},
        required: true,
      },
      target: {
        type: String,
        default: ''
      },
    },
    computed: {
      vProps() {
        // https://cn.vuejs.org/v2/api/#vm-attrs
        // 包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。
        // 当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。
        return {...this.$props, ...this.$attrs}
      }
    },
  }
</script>

使用这个组件

<!-- 内链, 点击之后在项目内跳转 -->
<XRouterLink to="/home"></XRouterLink>
<!-- 外链, 点击之后跳转到其他网站: 百度 -->
<XRouterLink to="https://baidu.com"></XRouterLink>