zukucode
主にWEB関連の情報を技術メモとして発信しています。

vueコンポーネントでvue-routerのページ制御を行う

vueコンポーネントの処理でvue-routerのページ制御を行う方法を紹介します。

vue-routerでページ遷移するときはrouter-linkのコンポーネントを使うことが多いですが、コンポーネント内で動的にページを切り替えたりページ遷移するまえに独自のチェックなどを行いたい場合があります。

以下のようにthis.$routervue-routerを参照できます。pushで指定したパスにページ遷移ができます。

<template>
  <div>
    <a href="/about" @click.stop.prevent="goAbout">ABOUT</a>
  </div>
</template>

<script>
export default {
  methods: {
    goAbout () {
      this.$router.push({ path: 'about' });
    }
  }
};
</script>

関連記事