[Vue] 이벤트를 통해 router 경로 이동하기

 

이벤트(특히 click)가 발생할 때, router 경로(특정 컴포넌트)로 이동해야할 때가 많습니다.

이럴 경우, 몇가지 자주 사용하는 방법에 대해 정리하고자 합니다.

 

---

1. router-link 사용하기

기존의 a태그를 이용하여 <a href=" ~ ">를 사용하는 의미와 동일합니다.

그러나, <router-link> 태그를 이용할 때는 여러 속성을 추가할 수 있습니다.

<router-link to="path 경로">router link move</router-link>

그냥 to로 할 경우는 기존의 경로에서 추가되어 "기존경로/path 경로" 로 나타나집니다. 

만약 기존경로를 제외하고, 그 경로자체로 이동하고 싶은 경우 아래와 같이 name을 추가하여 이동하고자 하는 컴포넌트 name을 기입합니다.

<router-link :to="{name: component의 name}">router link move</router-link>

 

2. this.$router.push

router-link 태그를 사용하기 힘든 경우, 자주 사용하는 방법입니다. 

<script>부분에 이벤트 발생시 해당하는 메소드를 작성 후

this.$router.push({ path: '' , params: ''} 문법을 이용하면 됩니다.

이 경우도 path대신 name을 사용할 수 있습니다.

 

3. location.href

<script>부분에 이벤트 발생시 해당하는 메소드를 작성 후 

location.href = 'path 경로'를 작성하면 됩니다.

다만, 이 location.href를 사용할 때,

router설정 중 mode가 history가 아닐 경우(즉, hash일 경우) 제대로 작동을 안할 수 있습니다.

또한, VUE처럼 SPA같은 프로젝트 내에서 페이지간 이동시 location.href보다는

앞의 방식들이 권장되고 있습니다.

(제 생각에는 location.href로 인해 새로고침이 되는 이유때문에 그러지 않을까 추측됩니다..)