1. vue-router 설치해준다.

1
npm install vue-router
cs


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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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;
cs


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

welcome.blade.php


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

1
2
3
4
5
6
7
8
9
10
11
12
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)
});
 
cs


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


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

Categories.vue



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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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;
 
cs


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

Siderbar.vue


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<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>
 
cs


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



js 디렉터리압축

js.zip


+ Recent posts