router-linkで外部リンクも内部リンクも済ませてしまいたい時の対処法

上記英語質問サイトの丸パクリですが、対応する日本語記事が見つからなかったので、メモ代わりに投稿させてください。

コード

vue.js

<template>
  <component v-bind:is="linkProps(to)">
      <slot></slot>
  </component>
</template>

<script>
  export default {
    props: {
      to: {
        type: String,
        required: true,
      },
    },
    methods: {
      linkProps(url)
      {
        if (url.match(/^(http(s)?|ftp):\/\//))
        {
          return {
            is: 'a',
            href: url,
            target: '_blank',
            rel: 'noopener',
          };
        }
        return {
          is: 'router-link',
          to: url,
        };
      },
    },
  };
</script>

必要な箇所に毎回メソッドを書く方法もありますが、多用するようであればコンポーネントにしておいた方が使いまわしが楽かもしれません。