Vue.js의 공식 라우터로 공식 홈페이지에 적혀있는 특징으로는 중첩 맵핑, 동적 라우팅, HTML5 history mode와 Hash mode 지원 등이 있다.
vue-router
패키지의 createRouter()
를 사용한다. 경로 정보를 담고있는 routes
와 사용할 방식의 history
를 하나의 객체에 넣어 createRouter()
의 입력으로 사용한다.
routes
routes
는 경로에 대한 정보를 가진 객체들을 담고있는 하나의 배열이다. 각 객체는 다음과 같은 정보를 담고있다.
path
주소창에 표시되는 경로, root경로는 /
이다.
component
path
에 해당하는 경로에서 표시할 컴포넌트.
name
path
의 별칭.
history
history의 모드를 지정한다.
createWebHashHistory()
로 생성한 인스턴스를 입력해 Hash Mode로 라우팅을 할 수 있다. Hash Mode는 URL앞에 Hash Charater(#
)가 위치하며 서버로의 요청은 최초 페이지를 로딩할 때만 이루어진다. SPA에 적합하지만 검색엔진최적화 등 단점이 존재한다.createWebHistory()
로 생성한 인스턴스를 입력해 HTML5 Mode로 라우팅 할 수 있다. 이 모드를 사용해서 SPA를 만든다면 새로고침시 404 Error가 발생할 수 있어 루트 경로로 리다이렉트 해주는 처리가 필요하다.// e.g.
const router = createRouter({
history: createWebHashHistory(),
routes: [
{
path: '/',
name: 'home',
component: Home
}
]
})
vuex
와 동일하게 어플리케이션 인스턴스에 use()
를 사용하면 Vue 컴포넌트에서 전역으로 사용이 가능하다. this.$router
로 접근하여 관련 함수들을 사용한다.
라우팅된 컴포넌트는 <RouterView />
또는 <router-view />
태그의 위치에 표시된다.
Vue 컴포넌트에서 url을 변경하는 방법은 크게 2가지다.
<RouterLink>
태그 사용<RouterLink>
또는 <router-link>
태그에 to
속성을 사용하면 클릭시 해당 url로 라우팅 되며 이는 html의 <a>
태그와 비슷하다. to
속성 또한 :
를 붙여 동적으로 설정이 가능하며 routes의 name
을 이용한 라우팅 또한 가능하다.
push
메서드 사용this.$router.push()
를 사용해서 <RouterLink>
와 동일한 동작을 할 수 있다.
<!--Root URL-->
<RouterLink to="/">HOME</RouterLink>
<!--name을 사용-->
<RouterLink :to="{ name: 'home'}">HOME</RouterLink>
<script>
function goHome() {
this.$router.push('/')
this.$router.push({ name: 'home' })
}
</script>
url 뒤에 ?
로 구분하여 query를 추가하는 것이 가능하다. query간의 구분을 &
로 하며 key=value형식으로 작성한다. 이렇게 입력한 query는 Vue 컴포넌트 내에서this.$router.query
로, 외부에서는 createRouter()
로 생성된 인스턴스 router의 router.currentRoute.value.query
로 접근이 가능하다.
예를 들어 url이
https://abc.com/home?name=kiko&id=30109
일 때,this.$router.query
또는router.currentRoute.value.query
에는
{ name: 'kiko', id: '30109' } 객체가 저장되어 있다.
path
의 url의 뒤에 /:name
을 붙여 사용한다. (name
은 예시이며 원하는 이름으로 설정이 가능하다.)this.$router.params
또는 router.currentRoute.value.params
에서 접근해 사용할 수 있다.
path
가 '/info/:id'로 지정된 상태에서https://abc.com/info/35
를 입력하면 해당하는 컴포넌트로 라우팅되고this.$router.params
에는 { id: '35'}와 같은 객체가 있다.
https://abc.com/info/
뒤에 어떠한 값이 들어와도 표시되는 컴포넌트는 하나이며 params의 값만 다르게 적용된다.
Navigation Guard
는 다른 url로 라우팅 될 때 시기별로 동작하며 주로 접근 권한을 확인하는데 사용된다.
router.beforeEach(to, from, next)
router.beforeEach
는 전역으로 모든 라우팅 과정에서 동작하며, 한 페이지에 접근하기 직전에 실행된다.
this.$router.push()
와 유사하게 사용한다.