[Udemy Vue 완벽가이드 Section13] 172. 프로그래밍 방식 내비게이션

TheNavigation.vue를 보자.

앱 내부에서 페이지의 다른 부분으로 이동하는데 router-link를 사용하고 있다.

다른 페이지로 연결되는 다른 링크를 가진다.

<router-link to="/teams">Teams</router-link>

아주 평범한 이동 방식이다.

 

그런데 어떨때는 프로그램 자체에서 이동해야 할 때가 있다.

 

UsersList페이지의 <ul>태그 위에 'Confirm'이라는 '버튼'이 있다고 해보자.

<button @click="confirmInput">Confirm</button>

이 버튼을 클릭하면 어떠한 코드를 실행한다 치고, methods옵션에 'confirmInput'메서드를 하나 만들어보자.

그럼 이 메서드에서 변수에 일부 데이터를 저장하거나 서버에 데이터를 보내거나 등 중요한 무언가를 실행한다.

그 작업을 하고난 후, 페이지를 변경하고싶다.

 

아주 흔한 시나리오다. 작업이 완료되면 그 위치를 변경하는 것.

이건 더미 예시일 뿐이지만, 더 큰 앱에는 실제 용례가 있다.

예를 들면, 양식이 제출되면 유저를 다른 곳으로 이동시키는 경우.

(나중에 메인 강의 프로젝트에서 직접 해볼예정.)

 

 

Confirm버튼에는 link를 사용하지 않는다.

왜냐하면 이동 뿐만 아니라 다른 것도 수행할 예정이므로.

그러니, 버튼을 클릭하면 confirmInput 메서드를 트리거 시켜보자.

그럼 뭔가 중요한 작업을 수행하고, 그 다음에 페이지를 이동한다.

프로그램 자체에서 이동하는 것.

페이지에 사용자가 클릭할 링크가 있는건 아니지만, JS 코드나 컴포넌트 config옵션 내부에서 이동을 트리거하는 것.

 

어떻게 하면 될까?

Vue앱에서 라우터를 사용하기 때문에 컴포넌트 config객체에서 사용가능한 특수 프로퍼티가 있다.

→ $router.push

app.use(router);

 

this키워드로 this.$router에 접근할 수 있다.

라우터 패키지를 추가했기 때문에 $router를 사용할 수 있다.

이 라우터에서 사용할 수 있는 다양한 메서드가 있는데, 프로그램 자체에서 이동하기 위해 push메서드를 써서 이 라우팅 history에 새 라우트를 푸시하는 예가 있다.

브라우저에 저장되는 이 라우팅 메모리에 새 라우트를 추가만 하면 된다.

 

가장 간단한 형태의 push는 이동하려는 경로(path)가 담긴 문자열을 취한다. 예를 들면 '/teams'

methods: {
 confirmInput() {
  //do something
  this.$router.push('/teams')
 },
}

 

저장 후 새로고침하고 Confirm을 클릭하면 push에 의해 /teams로 이동하게 된다.

 

다른 $router 메서드도 있다.

back, forward는 브라우저의 뒤로가기 및 앞으로 가기 버튼에 대응된다.

this.$router.back()//
this.$router.forward()

더 많은 메서드는 공식문서에서 찾아보면 된다.

 

 

여기선 프로그램 자체에서 이동하기 위해 push가 필요하다.

이 Confirm버튼을 클릭하면 자체적으로 Teams페이지로 이동한다.

 

 

 

이렇게 이동하기 전에 실행되어야 할 어떠한 코드가 있는 경우에는 $router를 통한 프로그램 자체 이동이 유용하다.

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.