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
スポンサーリンク
関連記事
公開日：2020年12月16日
記事NO：02868
