vue router

Vue 라우터란 무엇인가요?

Vue 라우터는 Vue.js 애플리케이션에 페이지 네비게이션을 추가하기 위한 공식 라이브러리입니다. 이를 통해 애플리케이션의 URL을 기반으로 다양한 라우팅 기능을 구현할 수 있습니다. Vue 라우터를 사용하면 싱글 페이지 애플리케이션(Single-Page Application, SPA)의 사용자 경험을 향상시킬 수 있습니다.

Vue 라우터의 주요 기능

라우팅: Vue 라우터는 URL과 컴포넌트를 매핑하여 페이지 간의 전환을 관리합니다. 각 URL에 대한 컴포넌트를 설정하고, 사용자가 URL을 변경할 때 해당 컴포넌트를 렌더링합니다.

중첩 라우팅: Vue 라우터는 중첩된 라우트 구조를 지원하여 여러 수준의 라우팅을 구성할 수 있습니다. 이를 통해 복잡한 애플리케이션을 구성할 수 있으며, 각각의 라우트는 자체적으로 컴포넌트를 가질 수 있습니다.

동적 라우팅: Vue 라우터는 동적 라우팅을 지원합니다. 즉, 라우트에 동적으로 매개변수를 전달하고, 해당 매개변수를 기반으로 동적으로 컴포넌트를 로드하거나 데이터를 가져올 수 있습니다.

내비게이션 가드: Vue 라우터는 내비게이션 가드 기능을 제공하여 라우트 전환 전후에 실행되는 함수를 정의할 수 있습니다. 이를 통해 인증, 권한 검사, 데이터 로딩 등의 작업을 수행할 수 있습니다.

프로그래매틱 네비게이션: Vue 라우터는 자바스크립트 코드에서 프로그래밍 방식으로 라우터를 조작할 수 있는 API를 제공합니다. 이를 활용하여 사용자 입력, 이벤트 또는 비동기 작업과 같은 상황에서 페이지 전환을 수행할 수 있습니다

export const router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            redirect: '/news',
        },
        {
            path: '/news',
            name: 'news',
            component: createListView('NewsView'),
        },
        {
            path: '/ask',
            name: 'ask',
            component: createListView('AskView'),
        },
        {
            path: '/jobs',
            name: 'jobs',
            component: createListView('JobsView'),
        },
        {
            path: '/user/:id',
            component: UserView,
        },
        {
            path: '/item/:id',
            component: ItemView,
        }
    ]
})