Laravel 앱에 Vue-Router를 구현해보기

Vue-Router 설치

npm install vue-router 

package.json에 "vue-router"가 추가되었는지 확인

package.json

"dependencies": {
    "bootstrap": "^4.4.1",
    "bootstrap-vue": "^2.7.0",
    "cross-env": "^7.0.2",
    "vue": "^2.6.11",
    "vue-router": "^3.1.6"
}

Vue-Router 추가

· app.js에서 Vue-Router를 가져와 VueRouter를 정의합니다.
・라우트로 표시하는 「Report/Form 페이지」도 작성

resources/js/app.js

require('./bootstrap');

// Bootstrap-vueの実装
import Vue from 'vue'
import VueRouter from 'vue-router'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'

Vue.use(VueRouter)

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

window.Vue = require('vue');
import ReportPage from './pages/report.vue'
import FormPage from './pages/form.vue'

import NavVar from './components/navbar.vue'
Vue.component('navigation-bar', NavVar)

const router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'report-page',
            component: ReportPage
        },
        {
            path: 'form',
            name: 'form-page',
            component: FormPage
        }
    ]
});

const app = new Vue({
    el: '#app',
    router
});

경로의 내용을 표시하는 구성 요소 만들기

router-view 만들기

resources/views/welcome.blade.php

……省略……
　<router-view></router-view>
……省略……

VueRouter에서 정의한 페이지 만들기

resources/js/pages/report.vue

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">{{ greeting }}</div>
                    <div class="card-body">
                        Report Component
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    module.exports = {
        data: function() {
            return {
                greeting: 'hello'
            }
        }
    }
</script>

resources/js/pages/form.vue

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">{{ greeting }}</div>
                    <div class="card-body">
                        Form Component
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    module.exports = {
        data: function() {
            return {
                greeting: 'hello'
            }
        }
    }
</script>

・각 페이지의 입구가 되는 네비게이션 바의 작성
· 가 Vue-Router의 태그입니다. resources/js/components/navbar.vue <template> <nav class="navbar navbar-expand-lg fixed-top navbar-light" style="background-color: #e3f2fd;"> <a class="navbar-brand" href="#" style="font-weight:bold;">자가 관리 도구</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation "> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <router-link class="nav-link" :to="{ name: 'report-page' }">보고서 <span class="sr-only">(current)</span></router-link> </li> <li class="nav-item"> <router-link class="nav-link" :to="{ name: 'form-page' }">기록</router-link> </li> </ul> </div> </nav> </template> 결과 확인 · 보고서 페이지

· 양식 페이지


· 폼 페이지에서 리프 페쉬하는 경우


→ Laravel 앱 내에서 라우트가 아니기 때문에 404 오류가 출력되는 것이 당연합니다.
앞으로 대응해 보자!