はじめに
現在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
コメントを残す