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태그를 이용해서 페이지를 이동시키면 클릭할 때마다 페이지가 새로고침 되어 실행속도가 굉장히 느렸기 때문이다.
현재 작성중인 코드들은 전부 싱글페이지로 컴포넌트화 하여 페이지 이동 간에도 동적으로 페이지를 가져오고 있는데, 위의 방식은 굉장히 잘못되었다고 판단한 것이다.
이 문제를 해결하는 방법은 매우 간단했는데, 이미 사용중인 vue-router에서 제공하는 <router-link> 태그를 사용하는 것이다.
<router-link to="/path" class="button">go path</router-link>
이렇게 a 태그를 router-link로 바꾸기만 하면 문제가 해결된다.
추가적으로 to=""에 매개변수를 넘겨야 할 때가 있을 것이다. 그런 경우에는
<router-link :to="`/path/${id}`" class="button">go path</router-link>
이런 식으로 처리해주면 간단히 해결할 수 있다.
또 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(); // 새로고침