Vue routerでTwitterシェアボタン
素の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....