Vue - 라우터 링크[router-link]

사용자가 페이지를 사용하면서 주소창에 자신이 원하는 경로를 구체적으로 적는 경우는 드물다.

개발자 혹은 웹에 대한 지식이 있는 사람이 아니고서야 아래처럼 페이지에 접근하거나 이동하는 일은 거의 없다고 생각한다.

www.mypage.com/member/login

http://www.mypage.com/member/login.html

www.mypage.com

그렇다면 개발자는 화면에서 사용자들이 페이지 이쪽저쪽을 이동 할 수 있도록 링크를 노출시켜줘야한다.

그럴때 사용하게는 router-link다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <router-view></router-view>
    </div>

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

    <script>
        var LoginComponent = {
            template: '<div>login</div>'
        }

        var MainComponent = {
            template: '<div>main</div>'
        }

        var router = new VueRouter({
            routes: [
                {
                    //페이지의 url 이름
                    path: '/login',
                    //해당 url에서 표시될 컴포넌트
                    component: LoginComponent
                },
                {
                    path: '/main',
                    component: MainComponent
                }
            ]
        });

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

※참고: 에디터는 vs-code를 사용중이며 에디터에서 마우스 우측 버튼을 눌러서 Open with live server를 실행시켜 간단한 테스트를 진행합니다. 해당 메뉴가 없는 분들은 Live Server 플러그인을 설치하시면 나올것으로 생각됩니다.

현재 저의 페이지는 위 소스와 같이 설정했습니다.

테스트를 위해 화면을 실행시켜보면 아무것도 표시되는게 없습니다.

주소창을 보시게되면 테스트를 위해 라이브서버를 켠 상황 그대로입니다.

그럼 이제 주소창 마지막 "/" 뒤에 login을 붙여보도록 하겠습니다.

new Vue({
	el: '#app',
    router: router
});

이와 같이 Vue 인스턴스를 생성하고 router에 VueRouter 인스터스를 담은 router 변수를 입력해주었습니다.

var router = new VueRouter({
    routes: [
        {
            //페이지의 url 이름
            path: '/login',
            //해당 url에서 표시될 컴포넌트
            component: LoginComponent
        },
        {
            path: '/main',
            component: MainComponent
        }
    ]
});

설정값에 대한 정보는 주석을 참고하시면 좋을것같습니다.

url끝에 login을 입력하여 접근하게되면 path: '/login'에 부합하기 때문에 그 바로 아래있는 component: LoginComponent에 담긴 템플릿이 <router-view></router-view>를 통해 보여지게 됩니다.

따라서

var LoginComponent = {
    template: '<div>login</div>'
}

template: 에 설절된 '<div>login</div>' 코드가 화면에 보여지면서

이와 같은 화면이 표시되는 것입니다.

그렇다면 url끝에 login을 지우고 main이라고 접속해보겠습니다.

말해뭐하겠습니까.

소스에 설정한 그대로 main이라는 글자 화면에 출력됩니다.

이렇게 사용자가 원하는 화면이 만들어졌다고 가정했을 때 사용자가 과연 로그인을 하거나 메인화면을 보기 위해서 직접 url을 수정해야 할까요?

그런일은 거의 없겠죠?

그래서 router-link를 이용해서 사용자에게 흔히 사용하는 a 태그를 보여줘야 합니다.

추가한 소스는 아래와 같습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div>
            <router-link to="/login">Login</router-link>
            <router-link to="/main">Main</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@2"></script>

    <script>
        var LoginComponent = {
            template: '<div>login</div>'
        }

        var MainComponent = {
            template: '<div>main</div>'
        }

        var router = new VueRouter({
            routes: [
                {
                    //페이지의 url 이름
                    path: '/login',
                    //해당 url에서 표시될 컴포넌트
                    component: LoginComponent
                },
                {
                    path: '/main',
                    component: MainComponent
                }
            ]
        });

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

기존 <router-view></router-view>의 상단에 router-link가 두개가 생겼습니다.

이제 저장을 하고 화면에 가서 직접 보도록 하겠습니다.

화면에 링크가 정말 생성됐군요. 각자 원하는 링크를 눌러보시면 라우터뷰 역시 path에 맞게 작동하는 걸 확인할 수 있을겁니다.

이것으로 router-link에 대한 포스팅을 마무리하겠습니다.

저작자표시

'Dev > Vue' 카테고리의 다른 글

Vue - computed로 클래스 조작 (0)	2022.05.31
Vue - watch (0)	2022.05.31
Vue - v-on (0)	2022.05.13
Vue - 엑시오스(axios) (0)	2022.04.25

'Dev > Vue' 카테고리의 다른 글

티스토리툴바