Webサービス開発

Laravel Vue.js チュートリアル クイズアプリ作成 MPAのページ遷移

 

koala
プロコアラ

今回はページにリンクを付けてページ遷移をしてみよう

student taro
見習いタロー

はい、先生!お願いします!!

この記事を書いた人
koala
プロコアラ@エンジニアブロガー
10年間エンジニアをしており、副業でWebサイトやWebサービスを作っています。
一時期資格取得にハマりTOEIC860点オーバー、応用情報処理は取得。休日はラズパイをいじるコアラ好きです。

 

今回のチュートリアル概要

今回は、前回作ったテスト一覧ページにリンクを付けてテスト詳細ページに移動するところまで作成します。

 

Viewが中心のお話になります。

 

テスト一覧ページの修正

テスト一覧ページのリンクをクリックすると、個別のテスト詳細ページに移動するようにします。

 

前回使用したテスト一覧ページのTestComponent.vueを修正します。

 

今回はSEOを考慮してSPA(Single Page Application)では無くMPA(Multi Page Application)で作成するため、Vue.jsのroute-linkは使用しません。

MPAではaタグを使用してページの遷移を実現します。

 

aタグのhrefをv-bindにして変数と関連づけています。

props.item.idはデータベースの連番で採番されるIDが入ります。

その変数をフィルタ関数のadd_pathで/test/1、/test/2となるように修正しています。

 

MPAで動作させる情報が少なくてどこにも記載がなかったため、この方法がスタンダードなのかよく分かりません。

 

 

テスト詳細ページの作成

 

コントローラの修正

テスト詳細ページのコントローラTestController.phpはshow関数を修正します。

routerはすでに作成済みですので、/test/1のようにidが指定された場合にshow関数が実行されます。

 

Test::findでデータベースから指定されたidのテスト情報を取得してきます。

テスト一覧同様に、受験率と合格率を計算ごにview側へ変数付きで渡しています。

indexとは異なり、testsではなくてtestを渡します。

 

Viewファイル  show.blade.phpの新規作成

新規にresources/views/test/show.blade.phpを作成します。

index.blade.phpとほぼ同様です。

compactで取得したtest変数をv-bindでVueの子コンポーネントに渡します。

 

Vueコンポーネントの新規作成

子コンポーネント TestShowComponent.vueを新規に作成します。

このコンポーネントもTestComponent.vueとほぼ同じものです。

 

app.jsの修正

TestShowComponentを登録するのを忘れないように行っておきましょう。

app.jsのtest-componentの下に以下のように追加しておきます。

 

テスト一覧のリンクをクリックすると以下の詳細ページにページ遷移できればOKです。

午前問題、午後問題は後日実装していきます。

 

 

まとめ

Vue.jsをMPAで使用する場合のページ遷移の方法を解説しました。

SPAで使用した場合、GoogleにはSEO上どのように認識されるか分からないためMPAで作成しています。

ここについては情報をウォッチしておきたいと思います。

次回は各テーブルのデータを作っていきたいと思います。

今回はここまで。ではでは!

 

ABOUT ME
プロコアラ
プロコアラ
RPAコンサルタントのプロコアラです。長年のエンジニア経験を活かしてして外資系コンサルファームでRPAコンサルしてます。 転職ノウハウ、プログラミング、英語の勉強方法など分かりやすいように解説していきます。