Vue.js router란.

Vue에서 router는 페이지를 쪼개는 기능을 하는데,

 

import {  createWebHistory, createRouter } from "vue-router";

import List from './components/List.vue';

import Contact from './components/Contact.vue';

const routes = [

    {

        path: "/list",

        name: 'list',

        component: List

    },

    {

        path: "/contact",

        name: 'contact',

        component: Contact

    }

]

const router = createRouter({

    history: createWebHistory(),

    routes,

});

export default router;

 

 

vue-router를 설치하고 거기서 router를 만드는 함수를 import해온다.

 

개발자가 의도대로 routes라는 변수안에 오브젝트 배열 형식으로

 

url과 해당 url에서 보여줄 컴포넌트를 할당한다.

 

 

밑에는 router라는 변수를 선언한다.

 

 

그리고 router를 생성하는 함수인

 

createRouter에 import해온 createWebHistory함수와 함께

 

변수 routes를 인자로 넣고 router 변수에 할당한다.

 

 

그리고 만들어진 router 변수를 다시 export default한다.

 

그다음 main.js 파일로가서

 

import router from '경로';

 

이렇게 router.js에서 export한 router변수를 import해 받는다.

 

 

그리고 main.js 파일의 맨 아래에

 

createApp(App).use(router).mount('#app')

 

이런 코드가 있는데 위처럼

 

.use(export한 router 변수)를 중간에 넣어준다.

 

 

그럼 router를 쓸 수 있다.

 

 

 

학원을 다닐 때와 다른점은, 그때는 routes 변수에 페이지를 넣을 때

 

페이지 하나당 배경을 포함한 페이지 전체가 되는 컴포넌트를 만들어서 routes에 넣어줬는데,

 

지금 강의에서는 배경 컴포넌트는 App.vue로 쓰고

 

페이지별로 바뀌는 내용만 컴포넌트로 만들어서 routes에 넣어주는점이 좀 다르고 헷갈린다.

 

 

그리고 App.vue에서 path(페이지)이동으로 바뀌는 컴포넌트 내용들은

 

router-view 태그가 알아서 바인딩해준다!

 

 

다시말하면 routes에서 path가 'list'이고 컴포넌트가 'List'인 route 객체를 올려뒀다면,

 

Vue가 알아서 url을 감지하고 router-view에 맞는 컴포넌트를 넣어준다.

 

 

그니까 url이 list면 거기에 맞게 router-view가 List 컴포넌트가 된다.