背景

根據 百度谷歌, 我們知道如果要在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>

咋一看沒問題, 但是會發(fā)生重復編寫此子組件代碼的問題, 不是最佳解決方案.

那么RouterLink組件到底能不能實現(xiàn)跳轉外鏈呢? 官方文檔沒有說那就再翻看源碼, 也發(fā)現(xiàn)并不能, 所有只有自己實現(xiàn)了.

編寫一個可以跳轉外鏈的RouterLink

方法1: 可以自己再實現(xiàn)一次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" 傳入內部組件——在創(chuàng)建高級別的組件時非常有用。
        return {...this.$props, ...this.$attrs}
      }
    },
  }
</script>

使用這個組件

<!-- 內鏈, 點擊之后在項目內跳轉 -->
<XRouterLink to="/home"></XRouterLink>
<!-- 外鏈, 點擊之后跳轉到其他網站: 百度 -->
<XRouterLink to="https://baidu.com"></XRouterLink>