라우팅 설정 과정
1. 라우팅할 컴포넌트 생성
2. 라우팅 정의(컴포넌트와 path 맵핑)
3. 라우팅 객체 생성후, 맵핑객체 주입
4. root컴포넌트에 라우팅 객체 주입
5. App.js의 <router-view>에 라우트에 맞는 컴포넌트가 렌더링된다.
동적 라우팅
동적 세그먼트는 앞에 :가 붙는다.
예) path='/user/:username/post/:post_id'
컴포넌트 안에서 동적 세그먼트의 값은 this.$route.params로 접근 가능하다.
동적 라우팅 사용시, 동일한 컴포넌트를 재사용한다. 이는 컴포넌트의 라이플사이클훅이 호출되지 않는다는 의미.
때문에 params 변경사항에 반응하기 위해서는 $route객체를 watch항목에 넣어야 한다.
라우트 안의 라우트 (중첩라우트)
템플릿은 App.js에 했던것과 마찬가지로, 컴포넌트가 렌더링될 부분에 <router-view></router-view>를 넣는다.
route 정의(path랑 component 맵핑해놓은곳..)에 children 배열로 선언한다.
{path: '/user/:id', component: User,
children: [
path: 'profile', component: UserProfile
]}
만약 /user/:id로 접근했을경우, 오류를 방지하기 위해 빈 서브루트 경로를 선언해놓는다.
{path: '', component: UserHome}
프로그래밍 방식 네비게이션
<router-link :to="..."> 와 router.push(...)는 같다.
새로운 항목을 히스토리 스택에 넣는다.
쿼리도 가져갈 수 있음.
replace -> 히슽리에 넣지않고 라우팅/router.go(...) -> history back.
router에 이름을 선언 가능
routes 객체에 name을 선언하면 끗
router-link 에서 to옵션에 name에서 사용하는 값과 일치./router.push에서 사용하는 name과 일치.
컴포넌트가 렌더링 될 영역에도 이름을 줄 수 있다.
<router-view>가 여러개인 경우..
<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
routes 옵션에 components 옵션에 각각 이름과 Vue 컴포넌트를 입력해준다.
이름이 없으면 명칭이 default가 됩니다.!
리다이렉트
/a에서 b로 리디렉션
routes: [{path : '/a', redirect: '/b'}]
혹은 이름이 있는 라우터의 경우
routes: [{path : '/a', redirect: {name: 'babo'}}]
혹은 동적 리디렉션을 위한 함수를 사용 할 수 있다.
routes: [{path : '/a', redirect: to => {return '/with-params:id'}}]
별칭
url을 다르게 표시 가능하다.
/a의 별칭이란 간단하게 말해서 /b를 방문시에도 url을 /a에 방문한것처럼 표시하는것.
routes: [
{ path: '/a', component: A, alias: '/b' }]
라우트 컴포넌트에 속성 전달
props를 true로 설정하면 route.params가 컴포넌트 props로 설정됩니다.
--> route.params로 접근해야 하던 녀석을 props로 사용 가능하단 말이죠.
$route에 의존성이 걸려있는경우
template: '<div>User {{ $route.params.id }}</div>'
const User = {
props: ['id'],
template: '<div>User {{ id }}</div>'
}
props 의존성 해제
{ path: '/user/:id', component: User, props: true },
props를 반환하는 함수도 만들 수 있습니다.
{ path: '/search', component: SearchUser, props: (route) => ({ query: route.query.q }) }
하지만 라우트 변경시에만 반영되므로 props에 상태를 저장하지 않도록 조심합시다.
댓글