How to redirect to external URL in Vue

we are going to learn about how to redirect to an external URL in the Vue Router.

Normally, we redirect a user to a different page on the same site by using the following method:

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

Redirecting to external URL

Suppose we have a /contact route in our vue app, when a user visits the /contact page we need to redirect them to an external url https://www.google.com/contact/ instead of the same domain redirect.

To redirect to an external url in Vue, we can use the window.location.href property.

Here is an example:

<template>  <div>    <h1>Contact Page</h1>  </div></template><script>export default {  created() {    window.location.href = "https://google.com/contact";  },};</script>

In the above code, we have added a window.location.href = “https://google.com/contact” inside the created() lifecyle hook.

Now, if a user tries to visit the /contact page he or she will be redirected to https://google.com/contact.

Similarly, we can also set a redirect to an external url inside the route object by using the beforeEnter route guard.

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