개발정리

뷰 라우터 본문

Vue.js/개념

뷰 라우터

coffee. 2023. 7. 30. 19:24

라우팅이란?

웹 페이지 간의 이동 방법이다.

뷰 라우터

뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리

 

뷰 라우터 예제

<html>
    <body>
        <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
        <script src="https://unpkg.com/vue-router@3/dist/vue-router.js"></script>

        <div id="app">  
            <h1>가위 바위 보</h1>
            <router-link to="/scissors">가위 내기</router-link>
            <router-link to="/rock">바위 내기</router-link>
            <router-link to="/paper">보 내기</router-link>

            <router-view></router-view>
        </div>  
        <script>
           const scissors={template:'<div>가위</div>'};
           const rock={template:'<div>바위</div>'};
            const paper={template:'<div>보</div>'}

           const routes=[
                {path:'/scissors',component:scissors},
                {path:'/rock',component:rock},
                {path:'/paper',component:paper}
           ]

           const router = new VueRouter({
                routes
           });

           new Vue({
                router
           }).$mount('#app');

        </script>
    </body>
</html>

<router-link>

-뷰 라우터 에서는 a태그가 아닌 router-link 태그를 사용합니다.

-router-link 태그는 새로고침없이 URL을 변경 해 줍니다.

 

<router-view>

-URL에 상응하는 컴포넌트를 보여주는 태그 입니다.

 

링크를 클릭 할때마다 해당 URL로 이동하며 컴포넌트가 교체됩니다.

 

 

 

네스티드 라우터 

<html>
    <body>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
        <script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>

        <div id="app">  
            <router-view></router-view>
        </div>  
        <script>
           var User= {
                template:`
                    <div>
                        <h1>사용자는 {{ $route.params.obj }}</h1>
                        <router-link to="/scissors">가위</router-link>
                        <router-link to="/rock">바위</router-link>
                        <router-link to="/paper">보</router-link>
                        <router-view></router-view>
                    </div>
                `
           };

           var UserProfile={template:'<p>User Profile Component</p>'};
           var UserPost={template:'<p>User Post Component</p>'}

           var routes=[
            {path:'/user/:obj',
            component:User,
            children:[
                {
                    path:'/user/:obj/scissors',
                    component:{template:'<div>가위</div>'}
                },
                {
                    path:'/user/:obj/rock',
                    component:{template:'<div>바위</div>'}
                },
                {
                    path:'/user/:obj/paper',
                    component:{template:'<div>보</div>'}
                }
            ]
        }
           ];

           var router = new VueRouter({
                routes
           });

           var app=new Vue({
            router
           }).$mount('#app');

        </script>
    </body>
</html>

네스티드 라우터

-네스티드 라우터는 라우터 뷰 안에 라우터 뷰를 표시하는 형태이다.

- :(콜론)를 사용하면 동적으로 라우트를 매칭 할 수 있습니다.

-/user/rock 으로 이동한 후 링크를 클릭 해보자

/user/rock/paper

네임드 뷰

-<router-view>에 name 속성을 사용해서 이름을 붙여 줄수 있습니다.

<html>
    <body>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
        <script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>

        <div id="app">  
            <router-view name="header"></router-view>
            <router-view></router-view>
            <router-view name="footer"></router-view>
        </div>  
        <script>
          
            var Body = {template: '<div>This is Body</div>'}
            var Header= {template: '<div>This is Header</div>'};
            var Footer= {template: '<div>This is Footer</div>'};
           
            var router = new VueRouter({
                routes:[
                    {
                        path:'/',
                        components:{
                            default:Body,
                            header:Header,
                            footer:Footer
                        }
                    }
                ]
            });

            var app= new Vue({
                router
            }).$mount('#app');

        </script>
    </body>
</html>

 

'Vue.js > 개념' 카테고리의 다른 글

이벤트 핸들링  (0) 2023.07.29
'Vue.js/개념' Related Articles more