[Vuejs] vue-router

vue-router

• 라우팅 : 웹 페이지 간의 이동 방법
• 라우터는 컴포넌트와 매핑
• SPA(Single Page Application) 제작할 때 유용

    <div id="app">
        <h1>Router</h1>
        <p>
            <router-link to="/">Home</router-link>
            <router-link to="/board">게시판</router-link>
            <router-link to="/qna">QnA</router-link>
            <router-link to="/gallery">앨범</router-link>
        </p>
        <router-view></router-view>
    </div>
    <script>
        const Main ={
            template: `<div>메인페이지</div>`
        };
        const Board ={
            template: `<div>게시판페이지</div>`
        };
        const Qna ={
            template: `<div>답변형게시판페이지</div>`
        };
        const Gallery ={
            template: `<div>사진페이지</div>`
        };

        const router = new VueRouter({
           routes: [
               {
                   path: '/',
                   component: Main,
               },
               {
                   path: '/board',
                   component: Board,
               },
               {
                   path: '/qna',
                   component: Qna,
               },
               {
                   path: '/gallery',
                   component: Gallery,
               },
           ] 
        });

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

 

<router-link> 는 <a> 와 같다.

<router-view></router-view> => 현재 라우트에 맞는 컴포넌트가 렌더링된다.