Help us understand the problem. What is going on with this article?

Vue Routerの設定(Laravel環境)

More than 1 year has passed since last update.

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

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 />'
})
asauasa
sorich
SORICHはWebシステム開発を主軸に、デザイン・Web制作・アプリ開発・IoTまで、クライアントの幅広いニーズに対応する技術者集団です。
https://www.sorich.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away