홍준혁

Vue.js-네임드 뷰 본문

Vue.js

Vue.js-네임드 뷰

홍준혁 [Hong-JunHyeok] 2020. 9. 22. 12:13
728x90

 

저번 시간에 한 번에 많은 라우터를 표현하는데 한계가 있는 네스티드 라우터를 배워봤었는데 이번엔

그 단점을 해결해줄 네임드 뷰를 배워 볼 것이다.

 

이런 식으로 네임드 뷰는 같은 레벨에서 여러 개의 컴포넌트를 표시할 것이다.

잔말 말고 바로 코드로 구현해보자.

 

<!DOCTYPE html>
<html>
    <head>
        <title>Vue.js Sample</title>
    </head>
    <body>
        <div id="app">
            <router-view name="header"></router-view>
            <router-view></router-view>
            <router-view name="footer"></router-view>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.4.3/vue-router.min.js"></script>
        <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>

 

div#app에 router-view가 3번 사용이 되었는데 이렇게 작성을 하면 "같은 레벨의 컴포넌트가" 3개가 화면애 보인다.

 

그다음 보면 각 컴포넌트의 내용이 표시되는 것을 알 수 있다.

이때 컴포넌트를 하나 더 만들어 보자 

 

그다음 routes에 경로를 하나 더 만들어 보자

 

이렇게 하고 결과를 보도록 하자.

주소에 login을 끝에 추가하면 아까 추가한 컴포넌트의 내용이 나오는 것을 알 수 있다.

 

그다음 이동이 편할 수 있도록 router-link를 넣도록  하자

이렇게 코드를 작성하고 실행해보면 a태그로 성공적으로 변환이 되면서 링크를 누르기만 하면 이동하는 편리한 웹을 만들어 볼 수 있다.

 

끝~

728x90

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

Vue.js-뷰 템플릿  (0) 2020.09.22
Vue.js-HTTP 통신  (0) 2020.09.22
Vue.js-네스티드 라우터  (0) 2020.09.21
Vue.js-Router(뷰 라우터)  (0) 2020.09.21
Vue.js-하위에서 상위 컴포넌트로 데이터 전달  (0) 2020.09.21
'Vue.js' Related Articles more
Comments