Vue

Vue.js router

테라시아 2025. 1. 16. 20:47

1. Vue Router
    Vue.js 라이브러리를 사용하여 싱글 페이지 어플리케이션(SPA)
    Vue Router를 사용하면 Vue로 만든 페이지 간 자유로운 이동 가능

    Vue Router 사용 방법
    1) npm install vue-router
    2) <script src="Vue Router 주소"></script>

    Vue Router 구현
        <router-view></router-view>
        url이 변경됨에 따라 해당 컴포넌트 display

        <router-link to='URL'>이동표시글자</router-link>
        페이지 이동 태그, 화면에서는 <a>태그의 역할
        to는 a 태그의 href의 역할 수행

 

☆ Code

<!doctype html>
<html>
<head>
    <title>Router Test</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.5.3/dist/vue-router.js"></script>
<body>
    <h1>Router Test Page</h1>
    <hr>
    <div id="routerdiv">
        <router-link to="/login">로그인하지마</router-link>
        <router-link to="/about">궁금해하지마</router-link>
        <hr>
        <router-view></router-view>
    </div>
</body>
<script>
    var LoginComponent = {
        template: '<div>로그인하실건가요?</div>'
    }

    var AboutComponent = {
        template: '<div>궁금해하지 않으셔도..</div>'
    }

    var router = new VueRouter({
        routes: [
            {
                path: '/login',
                component: LoginComponent
            },
            {
                path: '/about',
                component: AboutComponent
            }
        ]
    });

    var app11 = new Vue({
        el: '#routerdiv',
        router: router
    });
</script>
</html>