Vue.jsの$router.pushの使い方を説明する

Vue.jsにおける$router.pushの使い方について説明します。

使い方

$router.pushメソッドは、新しいルートにナビゲートするためのものです。これはVue Routerが提供するルーティングナビゲーションの機能の一つです。以下に使用法と例を示します：

ボタンをクリックしたときに、/dashboardという名前のルートにナビゲートしたいとします。

methods: {
  goToDashboard() {
    this.$router.push('/dashboard');
  }
}

クエリパラメータを持つルートがあり、ナビゲーション時にこれらのクエリパラメータを渡したい場合を考えてみましょう。

methods: {
  search(query) {
    this.$router.push({ 
      path: '/search',
      query: { keyword: query }
    });
  }
}

上記の例では、$router.pushメソッドはオブジェクトを引数として受け取ります。オブジェクトにはpathプロパティがあり、目的のルートのパスを指定します。また、queryプロパティを使ってクエリパラメータを渡すこともできます。

$router.pushメソッドを使うことで、Vue.jsアプリケーションで簡単にルーティングナビゲーションが行えます。ページから別のページに移動し、パラメータを渡すこともできます。