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

背景

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

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

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

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

咋一看没问题, 但是当子组件很多的时候, 就会发生写两遍重复代码的问题, 不是最佳解决方案.

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

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

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

方法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>