はじめに
自分が勉強した内容のまとめなので、正確性は保証しません。
こちらのサイトにcodesandboxを埋め込んでいます。
実際の振る舞いを見ながらコードの確認ができるので非常に便利です。
シンプルにcodesandboxめちゃくちゃおすすめなので、気になる方使ってみてください。
パラメータ利用とは
パラメータを利用したページとは、同じ vue ファイルのページでも、
URL によって見た目が変わってくるページです。
まずは実際の振る舞いを確認して、イメージを膨らましてください。
以下、サンプルで作成したコードの解説です。
Home Page から 3 つのリンクを載せています。
この 3 つのリンクは URL は異なりますが、同一の Vue ファイルにアクセスしています。
pages フォルダの構成は次のようになっており、アクセス先は welcome/_user.vue です。
pages
welcome
_user.vue
index.vue
README.md
パラメータを利用したページの作り方
作り方自体は、フォルダ構成とファイル構成を意識すれば簡単に作成することができます。
サンプルのように、単一のパラメータを利用したい場合は、
好きな名前のフォルダと_（アンダーバー）付きの Vue ファイルを用意します。
xxxフォルダ
_yyy.vue
複数のパラメータを設定したい場合は、パラメータの数だけ_（アンダーバー）付きのフォルダを追加します。
2 つのパラメータを設定したい場合は次のようなフォルダ構成となります。
xxxフォルダ
_yyyフォルダ
_zzz.vue
パラメータの受け取り方
URL に設定されたパラメータは次のコードで取り出すことができます。
this.$route.params.設定したパラメータ名
会員制のページなどでは、
ようこそ〇〇様みたいな形でパラメータが取り出され、利用されています。
URL に表示されるため、password などを渡すのに使うのはおすすめ出来ないかもしれません。
おまけ（method と computed の使い分け）
クリック等で呼び出される場合は method、
呼び出されずに変更があった場合に変更を加えたい場合は computed を使います。
おわり
パラメータの使い方について学びました。
複数人向けのサービスを作るとなると、意外と使う場面は多く出てくると思います。
積極的に活用していきましょう。
お疲れ様でした。