📚 공부한 내용
Vue Router
Vue Router란?
Vue.js의 공식 라우터로 공식 홈페이지에 적혀있는 특징으로는 중첩 맵핑, 동적 라우팅, HTML5 history mode와 Hash mode 지원 등이 있다.
생성
vue-router 패키지의 createRouter()를 사용한다. 경로 정보를 담고있는 routes와 사용할 방식의 history를 하나의 객체에 넣어 createRouter()의 입력으로 사용한다.
routes
routes는 경로에 대한 정보를 가진 객체들을 담고있는 하나의 배열이다. 각 객체는 다음과 같은 정보를 담고있다.
1. path
주소창에 표시되는 경로, root경로는 /이다.
2. component
path에 해당하는 경로에서 표시할 컴포넌트.
3. name
path의 별칭.
history
history의 모드를 지정한다.
- Hash Mode
createWebHashHistory()로 생성한 인스턴스를 입력해 Hash Mode로 라우팅을 할 수 있다. Hash Mode는 URL앞에 Hash Charater(#)가 위치하며 서버로의 요청은 최초 페이지를 로딩할 때만 이루어진다. SPA에 적합하지만 검색엔진최적화 등 단점이 존재한다. - HTML5 Mode
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가지다.
1. <RouterLink> 태그 사용
<RouterLink> 또는 <router-link> 태그에 to 속성을 사용하면 클릭시 해당 url로 라우팅 되며 이는 html의 <a>태그와 비슷하다. to속성 또한 :를 붙여 동적으로 설정이 가능하며 routes의 name을 이용한 라우팅 또한 가능하다.
2. 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>추가 기능
query
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' } 객체가 저장되어 있다.
param
- param은 동적 라우팅에 사용된다.
path의 url의 뒤에/:name을 붙여 사용한다. (name은 예시이며 원하는 이름으로 설정이 가능하다.) - url에 적힌 값은
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
Navigation Guard는 다른 url로 라우팅 될 때 시기별로 동작하며 주로 접근 권한을 확인하는데 사용된다.
router.beforeEach(to, from, next)
router.beforeEach는 전역으로 모든 라우팅 과정에서 동작하며, 한 페이지에 접근하기 직전에 실행된다.
parameter
- to
접근하려는 경로의 정보를 담고있다. - from
접근 이전에 있었던 경로의 정보를 담고있다. - next
Vue2에서 사용되던 함수로 실행시키면 입력에 따라 다른 경로로 이동한다.this.$router.push()와 유사하게 사용한다.
Reference
- 프로그래머스 프론트엔드 데브코스
- Vue Router 가이드
https://router.vuejs.org/introduction.html
