Vue.js 라우터

• router-view

  • 사용자가 url을 직접 입력하여 해당하는 url로 이동

• html

<div id="app">
    <router-view></router-view>
</div>

<!-- cdn 방식 vue router 설치 -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

• javascript

var router = new VueRouter({
    routes: [
        {
            path: '/foo',
            component: {
                template: '<div>foo</div>'
            }
        },
        {
            path: '/bar',
            component: {
                template: '<div>bar</div>'
            }
        }
    ]
});

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

 

• view-link

  • url 입력없이 링크를 클릭하여 해당하는 url로 이동

• html

<div id="app">
    <router-link to="/foo">foo</router-link>
    <router-link to="/bar">bar</router-link>
</div>

<!-- cdn 방식 vue router 설치 -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

• javascript

var router = new VueRouter({
    routes: [
        {
            path: '/foo',
            component: {
                template: '<div>foo</div>'
            }
        },
        {
            path: '/bar',
            component: {
                template: '<div>bar</div>'
            }
        }
    ]
});

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