[Vue.js] router-link

슈퍼만쓰·2021년 9월 7일
0
post-thumbnail

기존의 방식과 문제 제기

https://velog.io/@mahns/vue-href%EC%97%90-vue-router%EB%A1%9C-%EA%B0%92%EC%9D%84-%EC%A3%BC%EC%9E%90

어제 vue-router를 사용하여 url을 얻고 변수에 등록하여

<a :href="url" class="button">go url</a>

이런 식으로 코드를 짜서 버튼을 클릭하면 해당 url로 이동하는 코드를 작성하였는데, 하루만에 잘 못만든 코드라는 것을 알게되었다.

왜냐하면 a태그를 이용해서 페이지를 이동시키면 클릭할 때마다 페이지가 새로고침 되어 실행속도가 굉장히 느렸기 때문이다.

현재 작성중인 코드들은 전부 싱글페이지로 컴포넌트화 하여 페이지 이동 간에도 동적으로 페이지를 가져오고 있는데, 위의 방식은 굉장히 잘못되었다고 판단한 것이다.

template에서 사용; 기본

이 문제를 해결하는 방법은 매우 간단했는데, 이미 사용중인 vue-router에서 제공하는 <router-link> 태그를 사용하는 것이다.

<router-link to="/path" class="button">go path</router-link>

이렇게 a 태그를 router-link로 바꾸기만 하면 문제가 해결된다.

template에서 사용; 매개변수

추가적으로 to=""에 매개변수를 넘겨야 할 때가 있을 것이다. 그런 경우에는

<router-link :to="`/path/${id}`" class="button">go path</router-link>

이런 식으로 처리해주면 간단히 해결할 수 있다.

script에서 사용

또 html단에서가 아니라 프로그래밍 적으로 함수를 만들어 특정 이벤트 발생 시 동작을 하게 해야할 경우가 있다. vue-router가 등록된 상태인 경우에 this.$router를 사용하여 url에 접근할 수 있는데

this.$router.push("url")

를 이용하면 ("url")으로 이동할 수 있다.

쿼리 파라미터 읽기

스크립트 단에서쿼리 파라미터를 읽는 방법이다.

this.$route.query.test

이렇게 하면 ex.com?test="read" 에서 read를 읽을 수 있다.

정리

<router-link to="/path" class="button">go path</router-link>

<router-link :to="`/path/${id}`" class="button">go path</router-link>

this.$router.push(`/path/${id}`); // 변수 받아서 쓰기

this.$router.go(); // 새로고침

참고

https://router.vuejs.org/kr/guide/#html

profile
https://mahns.oopy.io/ 블로그 이전

0개의 댓글