はじめに
現在Laravel+Vue.jsでのアプリ制作の記録です。
※前回までの記録。
※前回までの記録。
【Laravel+Vue.js】アプリ制作の記録②プロジェクト作成
Vue Routerの実装
今回は安パイなVue.js側の制作をしていこうと思います。
①インストール
npm install --save-dev vue-router
※–save-devはローカルインストール。npm i -gで-gを付けるとグローバルインストール。デフォルトはローカル。
※npm install –save-devはnpm i -Dと省略できる。
Laravelアプリ環境下ではpackage.jsonが以下のように自動で変更される。
"devDependencies": { "axios": "^0.19", "cross-env": "^5.1", "laravel-mix": "^4.0.7", "lodash": "^4.17.13", "resolve-url-loader": "^2.3.1", "sass": "^1.15.2", "sass-loader": "^7.1.0", "vue": "^2.6.11", "vue-router": "^3.1.6", // 自動で追記 "vue-template-compiler": "^2.6.11" }, "dependencies": {} // --save-devを記載しないとこちらに追記される。
②ルートコンポーネントの作成
resources/js/App.vueを作成
<template> <div> <main> <div class="container"> <RouterView /> </div> </main> </div> </template>
③ページコンポーネントの作成
resources/js/pages/Register.vueを作成
<template> <h1>Register</h1> </template>
resources/js/pages/Login.vueを作成
<template> <h1>Login</h1> </template>
④resources/js/router.jsの作成
import Vue from 'vue' import VueRouter from 'vue-router' import Register from './pages/Register.vue' import Login from './pages/Login.vue' Vue.use(VueRouter) const routes = [ { path: '/', component: Register }, { path: '/login', component: Login } ] const router = new VueRouter({ mode: 'history', routes }) export default router
⑤app.jsの編集
import './bootstrap' import Vue from 'vue' import router from './router' import App from './App.vue' import Example from './components/Example' const app = new Vue({ el: '#app', router, components: { App, Example }, })
⑥views/layouts/app.blade.phpを編集
<body> <div id="app"> <p><example /></p> <p><App /></p> // ここを追記 </div> </body>
http://127.0.0.1:8000へアクセス。

⑦web.phpの編集
<?php Route::get('/','ListingsController@index'); Route::get('/login','ListingsController@index');
http://127.0.0.1:8000/loginへアクセス。

これでblade側の編集なしでVue側のコンポーネントが切り替わることが確認できた。
追記:<router-link>を使ってみた。
※実装するのを忘れていました。
※後述のソースコードではこちらは適用されてません。次の記事に記載のソースコードにて反映されています。
①Login.vueの編集
<template> <div> <router-link to="/">register</router-link> <a href="/">register</a> <h1>Login</h1> </div> </template>
②Register.vueの編集
<template> <div> <router-link to="Login">Login</router-link> <a href="/login">login</a> <h1>Register</h1> </div> </template>
http://127.0.0.1:8000/へアクセス。

左のLoginをクリックすると、http://127.0.0.1:8000/Loginへ遷移。
右のloginをクリックすると、http://127.0.0.1:8000/loginへ遷移。aタグの場合、一瞬白画面を描画してページを1から生成していることがわかる。
※この実装を次の記事の途中で実装してしまったため、見た目が少し異なります。
おわりに
ここまでで見た目は全然できていませんが、とりあえず仕組みの把握をしてみました。
次回はさらに深堀して苦手な(というか理解できていない)Vuexの実装。いけたらDB連携まで挑戦してみたいと思います。
参考
Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう (3) SPA開発環境とVue Router
コメントを残す