回答編集履歴

5 リンクがおかしい

tkow

tkow score 1229

2017/10/25 02:18  投稿

フロントエンド側ではオススメ順で言うと
1,vue-routerを使用してリンククリックでコンポーネントに遷移するようにして、パラメータを渡して、h1要素にマスタッシュ記法でそのパラメータを代入。
2,マスタッシュ記法で新たなdataプロパティを用意し、mounted時に現在のlocationを取得して、locationに対応するdataプロパティに代入する。
3,2と同様の処理をmethodsプロパティで行う。
などの方針があります。SPAを作成してる場合は1の方針が最適ですが、バックエンドでテンプレートをレンダリングしている場合は1の方針が取りづらいので、2,3の方針が良いと思います。
またはリクエストパラメータなどを紐付けてしまい、バックエンド側からレンダリングするという手もあります。ただし、こちらはバックエンドの実装と密結合になるため、あまりオススメはしません。
追記
以下のリンク先で、3番の方法を実現しています。(追記 すみません。なぜか古い履歴のコードへのリンクが張られていました。うまくいっているコードは以下のようになります。また、fiddleは、window.onloadが発火しないのと、古いコードはマスタッシュの記述漏れがあったので動かなかった感じです。)
[https://jsfiddle.net/tkow/vcq9kdpd/14/](https://jsfiddle.net/tkow/vcq9kdpd/14/)
[https://jsfiddle.net/tkow/vcq9kdpd/18/](https://jsfiddle.net/tkow/vcq9kdpd/18/)
4 リンクの修正

tkow

tkow score 1229

2017/10/25 02:15  投稿

フロントエンド側ではオススメ順で言うと
1,vue-routerを使用してリンククリックでコンポーネントに遷移するようにして、パラメータを渡して、h1要素にマスタッシュ記法でそのパラメータを代入。
2,マスタッシュ記法で新たなdataプロパティを用意し、mounted時に現在のlocationを取得して、locationに対応するdataプロパティに代入する。
3,2と同様の処理をmethodsプロパティで行う。
などの方針があります。SPAを作成してる場合は1の方針が最適ですが、バックエンドでテンプレートをレンダリングしている場合は1の方針が取りづらいので、2,3の方針が良いと思います。
またはリクエストパラメータなどを紐付けてしまい、バックエンド側からレンダリングするという手もあります。ただし、こちらはバックエンドの実装と密結合になるため、あまりオススメはしません。
追記
以下のリンク先で、3番の方法を実現しています。
以下のリンク先で、3番の方法を実現しています。(追記 すみません。なぜか古い履歴のコードへのリンクが張られていました。うまくいっているコードは以下のようになります。また、fiddleは、window.onloadが発火しないのと、古いコードはマスタッシュの記述漏れがあったので動かなかった感じです。)
[https://jsfiddle.net/tkow/vcq9kdpd/4/](https://jsfiddle.net/tkow/vcq9kdpd/4/)
[https://jsfiddle.net/tkow/vcq9kdpd/14/](https://jsfiddle.net/tkow/vcq9kdpd/14/)
3 リンク貼れてなかった

tkow

tkow score 1229

2017/10/24 18:10  投稿

フロントエンド側ではオススメ順で言うと
1,vue-routerを使用してリンククリックでコンポーネントに遷移するようにして、パラメータを渡して、h1要素にマスタッシュ記法でそのパラメータを代入。
2,マスタッシュ記法で新たなdataプロパティを用意し、mounted時に現在のlocationを取得して、locationに対応するdataプロパティに代入する。
3,2と同様の処理をmethodsプロパティで行う。
などの方針があります。SPAを作成してる場合は1の方針が最適ですが、バックエンドでテンプレートをレンダリングしている場合は1の方針が取りづらいので、2,3の方針が良いと思います。
またはリクエストパラメータなどを紐付けてしまい、バックエンド側からレンダリングするという手もあります。ただし、こちらはバックエンドの実装と密結合になるため、あまりオススメはしません。
追記
以下のリンク先で、3番の方法を実現しています。
https://jsfiddle.net/tkow/vcq9kdpd/4/
[https://jsfiddle.net/tkow/vcq9kdpd/4/](https://jsfiddle.net/tkow/vcq9kdpd/4/)
2 解決方法の提示

tkow

tkow score 1229

2017/10/24 18:09  投稿

フロントエンド側ではオススメ順で言うと
1,vue-routerを使用してリンククリックでコンポーネントに遷移するようにして、パラメータを渡して、h1要素にマスタッシュ記法でそのパラメータを代入。
2,マスタッシュ記法で新たなdataプロパティを用意し、mounted時に現在のlocationを取得して、locationに対応するdataプロパティに代入する。
3,2と同様の処理をmethodsプロパティで行う。
などの方針があります。SPAを作成してる場合は1の方針が最適ですが、バックエンドでテンプレートをレンダリングしている場合は1の方針が取りづらいので、2,3の方針が良いと思います。
またはリクエストパラメータなどを紐付けてしまい、バックエンド側からレンダリングするという手もあります。ただし、こちらはバックエンドの実装と密結合になるため、あまりオススメはしません。
またはリクエストパラメータなどを紐付けてしまい、バックエンド側からレンダリングするという手もあります。ただし、こちらはバックエンドの実装と密結合になるため、あまりオススメはしません。
追記
以下のリンク先で、3番の方法を実現しています。
https://jsfiddle.net/tkow/vcq9kdpd/4/
1 ミス

tkow

tkow score 1229

2017/10/19 02:25  投稿

フロントエンド側ではオススメ順で言うと
1,vue-routerを使用してリンククリックでコンポーネントに遷移するようにして、パラメータを渡して、h1要素にマスタッシュ記法でそのパラメータを代入。
2,マスタッシュ記法で新たなdataプロパティを用意し、mounted時に現在のlocationを取得して、locationに対応するdataプロパティに代入する。
3,2と同様の処理をmethodsプロパティで行う。
などの方針があります。SPAを作成してる場合1の方針が最適ですが、バックエンドでテンプレートをレンダリングしている場合は1の方針が取りづらいので、2,3の方針が良いと思います。
などの方針があります。SPAを作成してる場合1の方針が最適ですが、バックエンドでテンプレートをレンダリングしている場合は1の方針が取りづらいので、2,3の方針が良いと思います。
ただこちらは

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る