[Vue.js #4] 라우터(Router)란? - 페이지 링크를 손쉽게

 

라우터

• 라우터란 특정 url에 들어갔을 때 어떤 페이지로 갈지에 대한 정보를 포함하는 속성이다.
• vue 인스턴스의 router 라는 속성을 이용해 연결해준다.

        new Vue({
                el:'#app', //app 이라는 태그 안에 인스턴스 정의
                router:router //router 변수를 속성에 연결한다.
            })

---

라우터 링크를 이용하는 방법

• 라우터를 위한 링크 태그가 존재한다. <router-link to="/페이지">내용</router-link>을 이용해 html 부분에서 연결해주면 된다.이때 router-view에서는 라우터가 제공하는 컴포넌트를 보여주는 역할을 한다.

    <div>
        <!-- 라우터를 위한 링크 태그 -->
        <router-link to="/login">Login</router-link> 
        <!-- <a href="/login">Login</a> -->
        <router-link to="/main">Main</router-link>
    </div>
    <router-view></router-view>

• routes에 라우터 객체를 배열로 정의한다.
• 해당 페이지의 정보는 path 에 선언하고,페이지에 뿌릴 컴포넌트는 component 에 선언한다. 단, 컴포넌트는 페이지 당 하나만 가능하다. 아래는 위를 이용해 VueRouter라는 객체를 만든 코드이다.

 var LoginComponent={
        template:'<div>login</div>'
    }
    var MainComponent={
        template:'<div>main</div>'
    }
    var router=new VueRouter({
        //페이지의 라우팅(어떤 url을 들어갔을 때 어떤 페이지로 뿌려질지?) 정보가 들어가는 속성
        routes:[
            //로그인 페이지 정보
            {   //페이지의 url 이름
                path: '/login',
                //해당 url에서 표시될 컴포넌트을 연결하는 속성
                component: LoginComponent // 페이지 당 뿌려지는 컴포넌트는 하나. 인스턴스에 해당하는 컴포넌트는 여러 개.
            },
            //메인 페이지 정보
            {   //url은 main
                path: '/main',
                //컴포넌트 이름은 MainComponent
                component: MainComponent
            }
        ]
    });
    ```

• https://github.com/kwonET/TIL_2022/blob/test/vue.js/%EB%9D%BC%EC%9A%B0%ED%84%B0.md