[입문] Vue에서 external URL redirect 하는 법

보통 우리는 같은 사이트 내에서 다른 페이지로 이동하고자 할 때는 아래와 같이 라우터를 이용해서 redirect하는 방식을 이용한다.

this.$router.push("/about");

하지만 우리가 알아보고자 하는 방법은 같은 사이트 내부가 아닌, 외부 URL을 redirect하는 것이다.

아래의 소스를 보겠다. 해당 소스는 vue앱에 /contact 경로가 있다고 가정할 때, 사용자가 /contact 페이지를 접속할 경우 외부 url인 https://www.google.com/contact/ 페이지를 접속하고자 한다.
가장 쉬운 방법으로는 /contact 와 연결된 소스에 window.location.href 속성을 사용하면 된다.

Contact.js

<template>
  <div>
    <h1>Contact Page</h1>
  </div>
</template>
<script>

export default {

  created() {
    window.location.href = "https://google.com/contact";
  },

};
</script>

위의 소스에서, created()에 window.location.href = "https://google.com/contact"; 을 넣어주었다.
이제 사용자는 /contact를 접속할 시 https://google.com/contact 로 이동된다.

마찬가지로, 우리는 beforeEnter 라우트 가드를 사용해서 라우트 객체 내부의 외부 URL로 redirect를 설정할 수 있다.

{
    path: "/contact",
    component: Contact,
    beforeEnter(to, from, next) {
      window.location.href = "https://google.com/contact";
    }
}