vue-routerでリファラを取得する

前のページ情報を取得したいときに、vue-routerを使ってリファラを取得する方法について書きます。
ちなみにvue-routerを使ってるとJSのdocument.referrerでは正しい値を取れません。

本文

ルーティングファイル内でbeforeEachを定義して、リファラとなる値を保存する。

src/router/index.js

const router = new VueRouter({
  // ...
});

router.beforeEach((to, from, next) => {
  router['referrer'] = from;
  next();
})

そうすると使いたいコンポーネントでリファラの値を取得することができる。

Hoge.vue

<script>

export default {
  method: {
    hoge () {
      let referrer = this.$router.referrer;
      console.log(referrer);
    }
  }
};
</script>

補足

ちなみに特定のページでリファラを取得するこっち↓のやり方もある。
Vue.jsでアクセス元（referrer）を取得する │ エトセトラ備忘録
データ取得 | Vue Router

参考

Vue.js - VueRouterで前のページのURLを取得することは可能でしょうか？｜teratail
ナビゲーションガード | Vue Router

ナビゲーションガードについてもうちょっと勉強せねば・・・
間違いなどあったらご指摘ください。

おしまい