How to redirect to page and external url in vuejs

How to redirect to page and external url in vuejs

Page navigation is one of the basic features of any website from one page to another page.

In normal pages, Anchor links are used to navigate from one link to another link.

<a href="cloudhadoop.com/about">About</a>

The same can be replaced with binding in vuejs

<a :href="cloudhadoop.com/about">
  or
  <a v-bind:href="cloudhadoop.com/about"></a
></a>

It is a fixed way of adding the path to the HTML template that will redirect at the server level.

Then how do you navigate to the page programmatically? this post talks about the navigation of pages programmatically with the below approaches

One way is, that the Vue-router library provides a navigation mechanism and is configured to forward into another page. Another way is to use window.location.href to redirect the page.

This blog post talks about the below items.

  • Forward to other pages on the same website
  • Redirect to URL

this post talks about navigation from website.com/about and wants to navigate to website.com/contact` page.

Redirect to page and url in vuejs

There are multiple ways to redirect to other pages.

with inbuilt window object:

You have to set url programmatically using window.location.href

window.location.href = "/contact";

Redirect to external URL, you have to replace the path with url in setting the path.

window.location.href = "facebook.com/pages/mypage";

With Vue-router Application is configured router in for contact path.

const router = new VueRouter({ routes: [ { path: '/contact', name: 'contact',
component: ContactComponent, } ] });

It is easy with Vue-router with push method of router reference with the path as well as the name of a route.

Forward a page with the path as follows

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

/contact is path of the route that you configured in a Vue-router declaration.

with the route name, you have to replace the path with a name as follows

this.$router.push("contact");

External URLs can be redirected with push as follows.

Forward internal page with push is

this.$router.push("facebook.com/pages/mypage");