Laravel Mixでvue-routerを使う方法

Ⅰ. はじめに
Ⅱ. やり方
実行結果
参考

Ⅰ. はじめに

タイトルの通り「Laravel Mixでvue-routerを使う方法」です。

Ⅱ. やり方

1. vue-router をインストールする

npm i -D vue-router

2. ファイルを編集する

resources/views/welcome.blade.php

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

/resources/js/app.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

const app = new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

app.$mount('#app')

/resources/js/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Page1 from '../components/Page1'
import Page2 from '../components/Page2'

Vue.use(Router)

export default new Router({
  routes: [
    // { path: '/', name: 'Index', component: Index },
    // { path: '/', redirect: '/page1' },
    { path: '/page1', name: 'Page1', component: Page1 },
    { path: '/page2', name: 'Page2', component: Page2 },
    // { path: '/user/:id', name: 'UserDetail', component: UserDetail, props: true },
  ]
})

/resources/js/App.vue

<template>
  <div>
    <router-link :to="{ name: 'Page1' }">Page1</router-link>
    <router-link :to="{ name: 'Page2' }">Page2</router-link>
    <!-- <router-link :to="{ name: 'UserDetail', params: { id: 1 } }">User1</router-link> -->
    <div id="app">
      <router-view/>
    </div>
  </div>
</template>

/resources/js/components/Page1.vue

<template>
  <h1>Page1.vue</h1>
</template>

/resources/js/components/Page2.vue

<template>
  <h1>Page2.vue</h1>
</template>

3. ビルドする

npm run watch
# npm run prod

4. Webサーバを起動する

php -S localhost:8000 -t public

実行結果

f:id:kagasu:20190527211604p:plain

備忘録

備忘録