개발자의 끄적끄적

[Vue.js] 뷰 라우터(router-view, router-link)[펌] 본문

개발

[Vue.js] 뷰 라우터(router-view, router-link)[펌]

효벨 2020. 7. 10. 02:00
728x90
반응형

[Vue.js] 뷰 라우터(router-view, router-link)[펌]

 

 

뷰 라우터)

뷰 라이브러리를 이용하여 싱글페이지 애플리케이션을 구현할 때 사용하는 라이브러리

​

(cdm 방식)

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> //뷰 를 먼저 해주고
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> //라우터 해주면 됨

 

router-view)

<router-view>태그는 페이지의 url이 이동했을 때 그 범위내에서 뿌려주는 태그

​

 

router-link)

<router-link> 태그는 라우터에서 페이지 이동을 위한 태그

<a>태그와 비슷한 기능을 가짐

 

<body>
    <div id="app">
        <div>
            <router-link to="/login">로그인</router-link>
            <router-link to="/main">메인</router-link>
            <router-link to="/home">홈</router-link>
        </div>
        <router-view></router-view>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>    
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <script>
        var LoginComponent = {
            template: '<div>login</div>'
        }
        var MainComponent = {
            template: '<div>main</div>'
        }
        var HomeComponet = {
            template: '<div>home</div>'
        }

        var rou = new VueRouter({
            // 페이지의 라우팅 정보, 배열로 담김(페이지의 개수만큼 객체가 필요{} <- 객체)
            routes: [
                {// login 페이지 정보
                    // 페이지의 url
                    path: '/login',
                    // 해당 url 에서 표시될 컴포넌트
                    component: LoginComponent
                },
                {// main 페이지 정보
                    path: '/main',
                    component: MainComponent
                },
                {// home 페이지 정보
                    path: '/home', 
                    component: HomeComponet
                }
            ]
        });

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

​
출처 : https://blog.naver.com/PostView.nhn?blogId=lth9036&logNo=221579816680

반응형
저작자표시 비영리 변경금지

'개발' 카테고리의 다른 글

React-Native의 장단점은? [펌]  (0) 2020.07.11
React Native, Redux 란? Reactive 부터.. [펌]  (0) 2020.07.11
[vue.js] 처음 시작하는 Vue.js(2) 뷰 라우터 중첩 라우터부터 네임드 뷰까지  (0) 2020.07.10
[개발/기타] SSL 암호 확인 방법 [펌]  (0) 2020.06.27
[개발] 넥사크로 란? [펌]  (0) 2020.06.24
'개발' Related Articles more
Comments