laravel spa vue-router, welcome.vue

1. vue-router 설치해준다.

npm install vue-router

2. resources/js/router.js 파일을 생성한다.

import Vue from 'vue';
import Router from 'vue-router';
import Welcome from './views/Welcome.vue';
 
Vue.use(Router)
 
const routes = [
    {
        path: '/',
        name: 'welcome',
        component:Welcome
    }
];
 
const router = new Router({
    routes : routes
});
 
export default router;

3. resources/views/Welcome.vue 파일을 생성한다.

welcome.blade.php

4. app.js 에 router을 추가하자

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap';
 
new Vue({
    el: '#app',
    router,
    render: h => h(App)
});
 

브라우저에서 확인을 해보자

4. views/Categories.vue 를 생성한다.

Categories.vue

5. router.js 에 path설정을 추가한다.

import Vue from 'vue';
import Router from 'vue-router';
import Welcome from './views/Welcome.vue';
 
Vue.use(Router)
 
const routes = [
    {
        path: '/',
        name: 'welcome',
        component:Welcome
    },
    {
        path:'/categories',
        name:'categories',
        component:() => import('./views/Categories.vue')
    }
];
 
const router = new Router({
    mode: 'history',
    routes : routes
});
 
export default router;
 

6. Siderbar.vue 에 router-link를 설정해준다.

Siderbar.vue

<template>
  <div id="layoutSidenav_nav">
    <nav class="sb-sidenav accordion sb-sidenav-dark" id="sidenavAccordion">
      <div class="sb-sidenav-menu">
        <div class="nav">
          <div class="sb-sidenav-menu-heading">Core</div>
 
          <router-link to="/" class="nav-link" exact>
            <i class="fas fa-tachometer-alt"></i>
            <span>Dashboard</span>
          </router-link>
 
          <div class="sb-sidenav-menu-heading">Interface</div>
 
          <router-link to="/categories" class="nav-link" exact>
            <i class="fas fa-fw fa-chart-area"></i>
            <span>Categories</span>
          </router-link>
 
 
        </div>
      </div>
      <div class="sb-sidenav-footer">
        <div class="small">Logged in as:</div>Start Bootstrap
      </div>
    </nav>
  </div>
</template>
 
<script>
export default {};
</script>
 
<style>
</style>
 

라우터 링크를 클릭하면 body의 component만 변경되게 된다.

js 디렉터리압축

js.zip