Laravel chobi

【Laravel+Vue.js】アプリ制作の記録③Vue Routerの実装

はじめに

現在Laravel+Vue.jsでのアプリ制作の記録です。

※前回までの記録。

※前回までの記録。

【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

今さら聞けない？Vue Router

【いまさらですが】package.jsonのdependenciesとdevDependencies

ちゃんと使い分けてる? dependenciesいろいろ。

コメントを残す

RECOMMENDこちらの記事も人気です。