VueRouterで動的にpathを取得（検知）する方法

皆さんこんにちは！！

今回は、タイトルの通り「VueRouterで動的にpathを取得する方法」をご紹介します！

なぜ、このような記事を書くかと言うと、下記のコードを一旦見て下さい。

App.vue

<script>
export default{
    computed: {
      getPath() {
        return this.$router.currentRoute.path;
      }
    },
  }
</script>

これ実は、反映されないんです。

computedって値の変更を検知してくれますよね？

なのに、値の変更が検知されない。。。

なぜかと思い、色々調べたところ、公式サイトにはこのようなことが書かれていました。

ルートのパラメーターを使う際に特筆すべき点は、ユーザーが /user/foo から /user/bar へ遷移するときに同じコンポーネントインスタンスが再利用されるということです。 両方のルートが同じコンポーネントを描画するため、古いインスタンスを破棄して新しいものを生成するよりも効率的です。しかしながら、これはコンポーネントのライフサイクルフックが呼ばれないことを意味しています。

要は、VuRouterはページ遷移の際にURL自体は変わるのですが、”ライフサイクルフック”は呼ばれないということです。

だから、値の変更を検知してくれなかったのか。。。

そこで、同じ問題に直面してる方の助けになればなと思い、解決策をお教えします！！！

公式のドキュメントにも記されているので、ぜひご覧ください。

watchメソッドでpathを取得

以下のコードを追加し、値の変更を検知します。

今回はHeader.vue（グローバルナビゲーション）で値の変更を検知します。

components/Header.vue

<script>
export default{
    data() {
        return {
          curretPath: "",  //現在のパス
        }
    },
    methods: {
        detectPath(path) {
          //pathの上書き
          this.curretPath = path;
        }
    },
    watch: {
      $route (to, from) {
        //遷移先のpathを取得
        this.detectPath(to.path);
      }
    }
  }
</script>

computedで値の変更を検知

今回は、正規表現を使って/signupにアクセスしているかの確認を行います。

components/Header.vue

<script>
export default{
    data() {
        return {
          curretPath: "",  //現在のパス
        }
    },
    //追加
    computed: {
      signupPass() {
        // /signupにアクセスしているかの確認
        return /\/signup\/*/.test(this.curretPath);
      },
    },
    methods: {
        detectPath(path) {
          //pathの上書き
          this.curretPath = path;
        }
    },
    watch: {
      $route (to, from) {
        //遷移先のpathを取得
        this.detectPath(to.path);
      }
    }
  }
</script>

これで、pathの変更を動的に検知することができます！！！

解決するのに結構時間がかかったので、一苦労でした。。。

以上、「VueRouterで動的にpathを取得（検知）する方法」でした！！！

良ければ、LGTM、コメントお願いします。

また、何か間違っていることがあればご指摘頂けると幸いです。

他にも初心者さん向けに記事を投稿しているので、時間があれば他の記事も見て下さい！！

Thank you for reading