🤖

Laravel x VueにVue Routerを導入しコンポーネントを切り替える

2021/09/23に公開

Laravel

Vue.js

tech

Vue Routerを導入する

まずはnpmでVue Routerをインストールしましょう。

npm install vue-router

切り替えるページコンポーネントを簡単に作ります。
resources/jsにpagesディレクトリを作成しその中にIndex.vueとAbout.vueを作ります。

Index.vue

<template>
    <div>
        Index
    </div>
</template>

About.vue

<template>
    <div>
        About
    </div>
</template>

次にルーターの設定です。
resources/jsディレクトリにrouter.jsを以下のように作成します。

import Vue from 'vue'
import VueRouter from 'vue-router'

// ページコンポーネントをインポートする
import Index from './pages/Index.vue'
import About from './pages/About.vue'

// ルータをインストール
Vue.use(VueRouter)

// パスとコンポーネントのマッピング
const routes = [
  { path: '/', component: Index },
  { path: '/about', component: About },
]

// VueRouterインスタンスを作成する
const router = new VueRouter({
    mode: 'history',
    routes
})

// VueRouterインスタンスをエクスポートする
// app.jsでインポートするため
export default router

上記、見ていただいたらわかるかもしれないですが、ルートにアクセスしたらIndex.vueが表示され、また/aboutにアクセスされたらAbout.vueが表示されるようにします。
以上ができたらresources/js/app.jsで読み込みます。
app.jsに以下のコードを追加してください。

import router from './router' // 追加

const app = new Vue({
    el: '#app',
    router // 追加
});

次にコンポーネントを切り替えるようにbladeを編集します。
bodyタグの中を以下のように修正してみてください。リンクのあるナビゲーションの下に、コンテンツを表示できるようになります。
router-linkコンポーネントで表示するコンテンツを切り替えるリンクが生成され、
router-viewコンポーネントにリンクとマッピングしたページコンポーネントの内容が出力されます。

<body>
    <div id="app">
        <div>
            Navigation
            <ul>
                <li>
                    <router-link to="/">
                        HOME
                    </router-link>
                </li>
                <li>
                    <router-link to="/about">
                        ABOUT
                    </router-link>
                </li>
            </ul>
        </div>
        <div>
            Contents
            <router-view />
        </div>
    </div>
    <script src="{{ asset('js/app.js') }}"></script>
</body>

以上でファイルの修正は完了です。
以下のコマンドを実行しておくと修正したファイルを随時自動でビルドし直してくれるので実行しておきましょう。

npm run watch

そしてサーバを起動して

php artisan serve

http://127.0.0.1:8000 にアクセスすると、リンクが並んだナビゲーションの下にIndexのページコンポーネントの内容が表示され、リンクをクリックするとコンテンツの内容だけが更新されていることが確認できました。

Vue Routerを導入する

Discussion