素のHTMLファイルで書くシェアボタン

<a target="_blank" rel="nofollow" role="button" href="https://twitter.com/intent/tweet?text=こんにちは！">
  Twitterで共有
</a>

hrefの中にツイート用URLとツイート内容を入れる感じです。ちなみにこんにちは！の部分はパーセントエンコードでエスケープすることを強く推奨します。

ただ、Vue routerを使っていると<a>タグはハードコーディングみたいで気持ち悪いのでVue routerで完結させるようにさせます。

Vue routerでシェアボタン

router/index.jsのroutesに以下のパスを追加します

const routes = [
  {
    path: '/share',
    name: 'Share',
    beforeEnter() {
      const url = 'https://twitter.com/intent/tweet?text=';
      const text=`こんにちは！`;
      const encodedText = encodeURIComponent(text); //エスケープ処理
      window.open(url + encodedText, '_blank');
    }
  },
]

export default router

ルートにwindow.open()かlocation.href=''を使うことでページ移動出来ます。 移動先がツイート内容を付け加えたツイート用URLになる訳です。

<router-link :to="{name: 'Share'}">
  ツイートする
</router-link>

vue routerを使ったシェアボタンの完成です。

vue routerに変数を渡したい人向け

const routes = [
  {
    path: '/share',
    name: 'Share',
    beforeEnter(to) { //変更点1
      const url = 'https://twitter.com/intent/tweet?text=';
      const text=to.params.text; //変更点2
      const encodedText = encodeURIComponent(text);
      window.open(url + encodedText, '_blank');
    }
  },
]

export default router

<router-link :to="{name: 'Share', params: {text: 'hogehoge'}}"> //変更点3
  ツイートする
</router-link>

<router-link></router-link>のパラメータから変数を渡してto.params.変数で受け取ります。