[Vue.js] 페이지 이동하는 방법

1. html

<a href="url ">이동</a>
<a href=" {{url}}">이동</a>
<a v-bind:href="url">이동</a>
<a :href="url">이동</a>

 

2. 선언적 방식 네비게이션용 anchor 태그

<router-link tag="a" to="/">이동</router-link>
<router-link tag="a" :to="url">이동</router-link>

 

3. 프로그래밍 방식으로 라우터의 인스턴스 메소드 사용

Vue 인스턴스 내부에서 라우터 인스턴스에 $router로 액세스 할 수 있다.

<button type="button" @click="pageLink">이동</button>

pageLink () {
   // object
   this.$router.push({ path: 'home' })
   // 이름을 가지는 라우트
   router.push({ name: 'logout', params: { userId: 'test' }})
   // 쿼리와 함께 사용, 결과는 /page?gubun=123
   router.push({ path: 'page', query: { gubun: '123' }})
}

 

* router.go(n)
   : 히스토리 스택에서 앞으로 또는 뒤로 이동하는 단계를 나타내는 하나의 정수를 매개 변수로 사용

​
// 한 단계 앞으로. history.forward()와 같다.
router.go(1)​

// 한 단계 뒤로. history.back()와 같다.
router.go(-1)