すべてのカテゴリ

Vue Router の部品にデータを渡すには？Vue Router は、一般的な Web サイトのように、Web ブラウザで「ページ」を指定して表示する事ができるので、Web アプリを作る場合でも便利な場合が多くなります。この記事では、Vue Router の「ページ」に相当する「部品」にデータを渡す場合にはどうすれば良いかを紹介します。部品にデータを渡す基本的な方法Vue の部品（子）に呼び出し元（親）からデータを渡す場合には、Vue の公式チュートリアルで学習したように「props」を使って渡します。Vue Router を利用する場合でも、Vue のデータを渡す仕組みは同じなので基本的なやり方は同じです。ところが、Vue Router を利用する場合には、HTML 部分に直接「部品」の記述を書く必要がないので、どのようにデータを渡すのかがよくわからない場合があります。例えば、Vite を利用して、Vue のサンプルプロジェクトを Vue Router を使う設定で作成した場合には、「HomveView」と「AboutView」の二つの「ページ」がつくられます。この例では、「AboutView.vue」は次のような記述になっています。// (AboutView.vue)<template>  <div class="about">    <h1>This is an about page</h1>  </div></template><style>＠media (min-width: 10