라우터 옵션과 기법

동적 라우트 매칭

 

동적 라우트 매칭(Dynamic Route Matching)은 특정 패턴을 가진 경로들을 동일한 컴포넌트에 매핑애햐 할 경우 사용한다.

 

new VueRouter({
  routes: [
    { path: '/user/:id', component: ResumeComponent }
  ]
})

위와 같이 라우터를 정의하면 path에서 콜론으로 시작하는 부분(동적 세그먼트)이 다르더라도 같은 경로에 매핑된다.

 

/user/1과 /user/22 같은 URL이 모두 위에 정의된 ResumeComponent 컴포넌트로 이동하게 된다.

 

또한 :id에 대항하는 값은 해당 컴포넌트에서 this.$route.params를 통해 가져와서 사용할 수 있다.

 

<!-- ResumeComponent.vue -->
<template>
  <h1>{{ $route.params.id }}</h1>
</template>

 

 

 

 

 

 

 

컴포넌트에서 props 전달하기

 

동적 라우트 매칭에서 살펴본 것처럼 컴포넌트에서 $route를 사용하는 경우, 컴포넌트가 라우터 속성에 의존하게 되어 특정 URL에서만 사용된다는 문제점이 있다.

 

이 의존성 해제를 위해 컴포넌트와 라우터 속성을 분리하려면 props에 true를 전달해준다.

 

new VueRouter({
  routes: [
    { path: '/user/:id', component: ResumeComponent, props: true }
  ]
})

 

위와 같이 props가 true로 적용되면 :id가 id라는 props로 전달된다.

 

이를 통해 컴포넌트를 라우터 속성에 의존하지 않고 재사용할 수 있게 된다.

 

<!-- ResumeComponent.vue -->
<template>
  <h1>{{ id }}</h1>
</template>

<script>
export default {
  props: ['id']
}
</script>

 

 

 

 

 

 

 

 

라우터 네비게이션 메서드

 

라우터 API에는 <router-link>로 웹 페이지 이동을 위한 <a> 태그를 만드는 방법 외에도 프로그래밍적으로 페이지를 이동할 수 있는 메서드가 있다.

 

Vue 인스턴스 내부에서 라우터 인스턴스에 접근하려면 $router를 사용하면 된다.

 

 

router.push()

router.push(location, onComplete?, onAbort?)

 

<router-link>의 to 속성과 같다. 히스토리에 현재 페이지를 저장한 뒤 인자로 전달받은 URL(location)로 이동한다.

 

//string 전달
this.$router.push('home');

//object 전달
this.$router.push({ path: 'home' });

const postId = "1";
this.$router.push({ path: `/posts/$PpostOd` }); // -> /posts/1

//query와 함께 전달
this.$router.push({ path: 'user', query: { id: 'data' } }); // -> user?id=data

 

onComplete와 onAbort는 콜백 함수로, onComplete는 네비게이션이 성공적으로 완료되었을 경우 호출되고, onAbort는 현재 네비게이션이 완료되기 전 동일한 경로로 이동하거나 다른 경로로 이동될 때 호출된다.

 

export default {
  methods: {
    click() {
      this.$router.push("/home", this.completeHandler, this.abortHandler);
    },
    completeHandler() {
      console.log("complete");
    },
    abortHandler() {
      console.log("abort");
    },
  },
};

 

 

router.replcace()

 

router.replcat(location, onComplete? onAbort?)

 

히스토리에 현재 페이지를 저장하지 않고 이동한다. 그래서 히스토리에 경로가 남지 않으므로 백스페이스 키를 눌렀을 때 원래 페이지로 돌아갈 수 없다.

 

이름에 나타나듯이 현재 페이지가 다른 페이지로 대체되는 것이다.

 

사용하는 매개변수는 router.push() 메서드와 같다.

 

this.$router.replcat('home');

 

 

router.go()

 

router.go(n)

 

히스토리 스택에서 앞 또는 뒤로 전달된 인자(정수)만큼 이동한다.

 

this.$router.go(-1); //이전 페이지로 이동

this.$router.go(1); //다음 페이지로 이동

 

 

 

라우터 메타 필드

 

라우터를 정의할 때 meta 필드를 통해 원하는 메타 정보를 입력할 수 있다.

 

로그인이 필요한 라우팅인지 아닌지 구분해야 하는 경우에 활용할 수 있다.

 

new VueRouter({
    routes: [
    //authRequired: true라는 메타 필드 입력
    { path: 'orders', component: OrdersComponent, meta: { authRequired: true } }
    ]
})