ホーム > カテゴリ > PHP・Laravel・CakePHP >

Vue Routerの使い方 [Laravel]

作るもの

今回、作成するサンプルのVue Routerのモードは「history」です。

サーバー側の設定はLaravelのweb.phpで行います。サーバー設定を行いたくない方はRouter(router.js)のmodeを「hash」にして下さい。

1. プロジェクトの生成

今回はLaravel 6系でやりますが、7、8などでもOKです。

composer create-project --prefer-dist laravel/laravel プロジェクト名  "6.*"

2. laravel/uiのインストール

Laravelのバージョンによっては数値が異なるのでご注意下さい。

cd プロジェクト名

// Laravel6
composer require laravel/ui:^1.0 --dev
// Laravel7
composer require laravel/ui:^2.4

※2020/12/16時点ではLaravel8の情報はまだないようです。

3. Vue.jsのインストール

php artisan ui vue

4. 各パッケージのインストール

npm install

※node_modulesフォルダが生成されます。

5. Vue Routerのインストール

npm install vue-router

6. ファイル構成と各ファイル

ファイル構成

次のファイルを編集及び新規作成します。

resources/js/app.js
resources/js/router.js
resources/js/components/app.vue
resources/js/components/article.vue
resources/js/components/home.vue
---
resources/views/welcome.blade.php
---
routes/web.php

6-1. resources/js/app.js

require('./bootstrap');

// Vue.js
window.Vue = require('vue');

// Vue Router
import router from './router.js'

Vue.component('app-component', require('./components/app.vue').default);

const app = new Vue({
    el: '#app',
    router: router, // ルーターを追加する
});

6-2. resources/js/router.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from './components/home.vue'
 
Vue.use(Router)
 
export default new Router({
  
  // modeのデフォルトは「hashモード」です。
  mode: 'history',
 
  // 1. hashモード
  // web.phpの設定は不要です。
  
  // [URLの例]
  // http://localhost:8000/#/
  // http://localhost:8000/#/article/5
  // http://localhost:8000/#/article/33
  
  // 2. historyモード
  // web.phpの設定が必要です。
  
  // [URLの例]
  // http://localhost:8000/
  // http://localhost:8000/article/5
  // http://localhost:8000/article/33
  
  // 3. abstractモード
  // 詳細は公式サイトへ https://router.vuejs.org/ja/api/#mode 
  
  // アプリのベースURL 
  base: process.env.BASE_URL,
  
  // ルーターの設定
  routes: [
    {
      path: '/',
      name: 'Home',
      
      // 同期でコンポーネントを呼び出す
      component: Home
    },
    {
      path: '/article/:id',
      name: 'Article',
      
      // 非同期でコンポーネントを呼び出す
      // ※Homeのようにimportしたコンポーネントを設定するのでも可
      component: () => import('./components/article.vue')
    },    
  ]
  
})

6-3. resources/js/components/app.vue

<template>
  <div> 
    <div>
      <router-link to="/" tag="button">Home</router-link>
      <router-link to="/article/5">記事 NO.5</router-link>
      <router-link to="/article/33">記事 NO.33</router-link>
    </div>
    <!-- router-viewに各コンポーネントが描画される -->
    <router-view/>
  </div>
</template>
 
<script>
</script>
 
<style scoped>
a {
  color: blue;
  text-decoration: none;
}
 
/* リンクがアクティブになっているときに適用 */
a.router-link-exact-active {
  color: black;
  font-weight: bold;
}
</style>

6-4. resources/js/components/article.vue

<template>
  <p>記事No：{{ id }}がクリックされました。</p>
</template>
 
<script>

export default { 
  
  // ---------------------
  //  データ定義
  // ---------------------
  data() {
    return {
      id: 0
    }
  },
  
  // ---------------------
  //  作成時
  // ---------------------
  created() {
    this.id = this.$route.params.id
  },
  
  // ---------------------
  //  監視
  // ---------------------  
  // $routeが変更されたときにidを再設定する
  watch: {
    '$route'(to, from) {
      this.id = to.params.id
    }
  }
  
}
</script>
 
<style scoped>
</style>

6-5. resources/js/components/home.vue

<template>
  <p>{{ message }}</p>
</template>
 
<script>

export default {

  // ---------------------
  //  データ定義
  // ---------------------
  data: function () {
    return {
      message: "Hello Vue Router!"
    }
  }
  
}
</script>
 
<style scoped>
p {
  font-size: 2em;
}
</style>

6-6. resources\views\welcome.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{{ url('css/app.css') }}" type="text/css">
</head>
<body>
  
  <!-- ここでVue.jsの設定 -->
  <div id="app">
    <app-component></app-component>
  </div>
  <script src="{{ url('js/app.js') }}"></script> 
 
</body>
</html>

6-7. routes\web.php

<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('welcome');
});

// 追加分
Route::get('article/{id}', function () {
    return view('welcome');
});

7. 開発用ビルド

CSS/JavaScriptを各1つのファイルにまとめる。

npm run dev

8. 実行する

php artisan serve

http://localhost:8000/





関連記事


前の記事：Vue.jsの使い方と各種初期設定 [Laravel]
次の記事：Vuexの使い方 [Laravel]

公開日：2020年12月16日
記事NO：02868