laravel6 + vue routerでHello, World表示。やることが…やることが多い…!!

SPA(Single Page Application)とはAPIを用意して、URL変更に伴う画面遷移は行わない。
その画面遷移を司るのがvue router

参考URL:
Vue Router×Laravel Mixでフロントエンドの画面遷移を行う方法
 Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう (3) SPA開発環境とVue Router

1, package.json の devDependencies に追加(jsonファイルにコメントは入れられない！)

"vue": "^2.5.17",
"vue-template-compiler": "^2.5.21",
"browser-sync": "^2.26.3",
"browser-sync-webpa,ck-plugin": "2.0.1"

"vue": "^2.5.17",

"vue-template-compiler": "^2.5.21",

"browser-sync": "^2.26.3",

"browser-sync-webpa,ck-plugin": "2.0.1"

2, 実際にパッケージをインストール

npm install

1	npm install

3, webpack.mix.js(laravel-mixの設定ファイル)

/*
mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');
*/
mix.browserSync('自分のドメインか、IPアドレスを記述する')
    .js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .version()

// .browserSync = ツール(browserSync)を使ってPHPやJSが変更されたら自動的にリロードさせる
// .js()と.sass() = コンパイルして出力させる
// .version() = コンパイルする度にバージョンを上げる。

mix.js('resources/js/app.js', 'public/js')

.sass('resources/sass/app.scss', 'public/css');

mix.browserSync('自分のドメインか、IPアドレスを記述する')

.js('resources/js/app.js', 'public/js')

.sass('resources/sass/app.scss', 'public/css')

.version()

// .browserSync = ツール(browserSync)を使ってPHPやJSが変更されたら自動的にリロードさせる

// .js()と.sass() = コンパイルして出力させる

// .version() = コンパイルする度にバージョンを上げる。

4, routes/web.phpで、どんなパスでも必ずindex.blade.phpに行くようにする。

// APIのURL以外のリクエストに対してはindexテンプレートを返す
// 画面遷移はフロントエンドのVueRouterが制御する
Route::get('/{any?}', function () {
    return view('index');
})->where('any', '.+');

// APIのURL以外のリクエストに対してはindexテンプレートを返す

// 画面遷移はフロントエンドのVueRouterが制御する

Route::get('/{any?}', function () {

return view('index');

})->where('any', '.+');

5, resources/view/index.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">
    <title>{{ config('app.name') }}</title>

    <!-- Scripts -->
    <script src="{{ mix('js/app.js') }}" defer></script>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merriweather|Roboto:400">
    <link rel="stylesheet" href="https://unpkg.com/ionicons@4.2.2/dist/css/ionicons.min.css">

    <!-- Styles -->
    <link href="{{ mix('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app"></div>
</body>
</html>

<!doctype html>

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>

<title>{{ config('app.name') }}</title>

</head>

<body>

</body>

</html>

6, resources/js/app.js(画面遷移をコントロールするjs)に追記

// vueコンポーネントを定義
import Vue from 'vue'

// #appの所にHello, Worldを突っ込む！
new Vue({
    el: '#app',
    template: '<h1>Hello, World</h1>'
})

// vueコンポーネントを定義

import Vue from 'vue'

// #appの所にHello, Worldを突っ込む！

new Vue({

el: '#app',

template: '<h1>Hello, World</h1>'

})

7, フロントエンドのビルド

# 一回だけビルド
npm run dev
# 変更される度に自動ビルド
npm run watch

# 一回だけビルド

npm run dev

# 変更される度に自動ビルド

npm run watch

これで、ようやくブラウザにHello, Worldが表示された。
やることが…やることが多い…!!

vue-routerの基本的な流れは、以下のようになる。
1, URL(パス情報を含む)
2, index.blade.php(ベースとなるHTMLは、ここに記述。app.jsを読み込む)
3, app.js(vue.jsの設定ファイル？includeするヘッダファイルみたいなもん？App.vueを読み込む。routerも読み込んでいる)
4, app.vue(ベースとなるvueコンポーネント。＜ＲｏｕｔｅｒＶｉｅｗ　／＞がある。)
5, router.js(ここでルーティング。なんたら.vueを読み込んでいる)
6, なんたら.vue(切り替わる部分のvueコンポーネント)

8, vue-routerのインストール

npm install -D vue-router

1	npm install -D vue-router

9, vueコンポーネントの作成(app.vueとexample.veuとexample2.veuの3種類)
app.vueがベースで、example.veuとexample2.veuが切り替わるvueコンポーネント

・resources/js/App.vue

<template>
  <div>
    <main>
      <div class="container">
        <RouterView />
      </div>
    </main>
  </div>
</template>

<div>

<main>

</div>

</main>

</div>

</template>

・resources/js/pages/Example.vue

<template>
  <h1>Page1</h1>
</template>

</template>

・resources/js/pages/Example2.vue

<template>
  <h1>Page2</h1>
</template>

</template>

10, ここでようやくvue-routerが出てくる
・resources/js/router.jsに記述

// 1.vueコンポーネント/VueRouterの定義
import Vue from 'vue'
import VueRouter from 'vue-router'

// 2.ページコンポーネントの定義
import Example from './pages/Example.vue'
import Example2 from './pages/Example2.vue'

// 3.ルートコンポーネントを有効にする
Vue.use(VueRouter)

// 4.パスのマッピング
const routes = [
  {
    path: '/',
    component: Example
  },
  {
    path: '/example2',
    component: Example2
  }
]
// 5.インスタンスの生成
const router = new VueRouter({
    mode: 'history',
    routes
})
// 6.インスタンスのエクスポート
export default router

// 1.vueコンポーネント/VueRouterの定義

import Vue from 'vue'

import VueRouter from 'vue-router'

// 2.ページコンポーネントの定義

import Example from './pages/Example.vue'

import Example2 from './pages/Example2.vue'

// 3.ルートコンポーネントを有効にする

Vue.use(VueRouter)

// 4.パスのマッピング

const routes = [

{

path: '/',

component: Example

{

path: '/example2',

component: Example2

}

]

// 5.インスタンスの生成

const router = new VueRouter({

mode: 'history',

routes

})

// 6.インスタンスのエクスポート

export default router

10, 最期にvue-routerを呼び出すapp.jsを記述
resources/js/app.js

import Vue from 'vue'
import router from './router' // router.jsでエクスポート内容を定義
import App from './App.vue' // ルートコンポーネントの定義

new Vue({
  el: '#app',
  router, // ルーティングの定義を読み込む
  components: { App }, // ルートコンポーネントの宣言
  template: '<App />' // ルートコンポーネントの表示
});

import Vue from 'vue'

import router from './router' // router.jsでエクスポート内容を定義

import App from './App.vue' // ルートコンポーネントの定義

new Vue({

el: '#app',

router, // ルーティングの定義を読み込む

components: { App }, // ルートコンポーネントの宣言

template: '<App />' // ルートコンポーネントの表示

});

vue-routerを使って、URLのパス(/と/example2)で表示を変更出来た。
う～ん、単純なHTML&JSと違って、多段式に構造が入り組んでいて分かりづらい…。

関連記事