Written by 최태열
on January 26, 2021

Vue Router

Router

Vue 에서는 화면이 전환되는 행위를 Route 라고 한다.

그리고 그러한 Route를 Single Page에서 쉽게 구현할 수 있도록 만든 것이 Router이다.

기본 구현

기본적으로는 Vue 객체에 페이지에 해당하는 router-view 를 통해 보여준다.

이 router-view는 router-link를 통해 이동한 페이지에 해당하는

component를 출력한다.

<div id="app">
    <h1>Hello App!</h1>
    <p>
        <!-- 기본적으로 `<router-link>`는 `<a>` 태그로 렌더링됩니다.-->
        <router-link to="/foo">Go to Foo</router-link>
        <router-link to="/bar">Go to Bar</router-link>
        <router-link to="/name">Go to Name</router-link>
        <router-link to="/table">Go to Table</router-link>
    </p>
    <!-- 현재 라우트에 맞는 컴포넌트가 렌더링됩니다. -->
    <router-view></router-view>
</div>

go to 를 클릭하면 해당 페이지로 router-view가 변경된다.

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
    const Foo = { template: '<div>foo</div>' }
    const Bar = { template: '<div>bar</div>' }

    //router라는 기술로 개발되는 각각의 component들은 개별 객체들로 간주
    //app id값을 보유한 view기반의 Vue instance 내부의 함수가 아닌 개별 객체 단위로 구성되는 함수에 대한 이벤트
    const Name = {
        template: '<button v-on:click="myFun">최태열</button>',
        methods: {
            myFun: function () {
                alert(1);
            }
        }
    }
    const TableData = {
        template: `
                    <table>
                    <tr>
                        <th>Company</th>
                        <th>Contact</th>
                        <th>Country</th>
                    </tr>
                    </table>
                    `}

</script>

페이지 별로 알맞은 template과 그에 따른 method들을 객체화 하여 저장한다.

<scrip>
const router = new VueRouter({
        routes: [
            { path: '/foo', component: Foo },
            { path: '/bar', component: Bar },
            { path: '/name', component: Name },
            { path: '/table', component: TableData }
        ]
    })

    const app = new Vue({
        el: "#app",
        router,
    });
</scrip>

해당 component들을 router에 맵핑하고 주소를 지정한다.

만든 router를 Vue 객체에 넣으면 된다.

Discussion and feedback

← → Top