Vueでページの移動をComponentで検知する方法($route・watch・computed)

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、Vueでページの移動をComponentで検知する方法($route・watch・computed)について解説していきます。

1 Vueでページの移動をComponentで検知する方法($route・watch・computed)
2 JavaScript書籍 Ver. 中級-上級者向け
3 JavaScript書籍 Ver. 初級者向け
4 Twitterやってます！Follow Me！
5 最近の投稿

Vueでページの移動をComponentで検知する方法($route・watch・computed)

computedで、ページの移動をCheckする

computedで、$routeにアクセスして、ページの移動をCheckする方法は、よく使用します。

computed: {
  // 現在のURLパスのTop_Pathを取得する
  currentTopPath() {
    return this.$route.path.split("/")[1];
  },
},

watchで、ページの移動をCheckする

watch でページの移動をCheckする方法も使えます。

// 監視対象のData: 変更検知をwatchする
watch: {
  // Pathの変化: Page移動を監視する
  $route(newRoute, oldRoute) {
    console.log("newRoute", newRoute);
    console.log("oldRoute", oldRoute);
    const topPath = newRoute.path.split("/")[1];
    console.log("topPaht", topPath);
  },
},

SampleCode全文

SampleCode全文は、次のとおりです。

<template>
  <div>
    <h2>Sample_Vue_Template</h2>
    <div class="login_btn" @click="onClickLogin">
      <a v-text="loginText" :style="loginLinkStyle"></a>
    </div>
  </div>
</template>
<script>
export default {
  name: "SampleComponent",
  components: {},
  props: {
    loginLinkStyle: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      loginText: "ログイン",
    };
  },
  computed: {
    // 現在のURLパスのTop_Pathを取得する
    currentTopPath() {
      return this.$route.path.split("/")[1];
    },
  },
  // 監視対象のData: 変更検知をwatchする
  watch: {
    // Pathの変化: Page移動を監視する
    $route(newRoute, oldRoute) {
      console.log("newRoute", newRoute);
      console.log("oldRoute", oldRoute);
      const topPath = newRoute.path.split("/")[1];
      console.log("topPaht", topPath);
    },
  },
  methods: {
    // LoginPage
    onClickLogin() {
      this.$router.push({
        path: "/login",
      });
    },
  },
  created() {
    // Routing情報
    console.log($route);
  },
};
</script>
<style scoped>
.bzu_login_btn {
  background-color: #fff;
}
.bzu_login_btn:hover {
  background-color: rgba(128, 128, 128, 0.5); /* RGB値と透明度の値 */
}
</style>