Vue Routerの設定（Laravel環境）

ルートコンポーネントの作成

resources/js/components/App.vue

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

ページコンポーネントの作成

resources/js/components/pages以下にページコンポーネントを作成する

• User.vue
• List.vue

ルーティングの設定

resources/js/router.js

import Vue from 'vue'
import VueRouter from 'vue-router'

// ページコンポーネントをインポート
import List from './components/pages/List.vue'
import User from './components/pages/User.vue'

Vue.use(VueRouter)

// パスとコンポーネントのマッピング
const routes = [
  {
    path: '/',
    component: List
  },
  {
    path: '/user',
    component: User
  }
]

const router = new VueRouter({
  // ページのリロード無しにURL遷移を実現する 
  mode: 'history',
  routes
})

export default router

app.jsの編集

resources/js/app.js

import Vue from 'vue'
// ルーティングの定義をインポート
import router from './router'
// ルートコンポーネントをインポート
import App from './components/App.vue'

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