How to redirect in VueJS?

Hi Friends 👋,

Welcome To SortoutCode! ❤️

To redirect from a page to another page in VueJS. We are going to use the vue-router module. By using the vue-router we are going to define some route and then using these this.$router.push(), this.$router.replace(), and window.location.href we are going to redirect.

Short solution

this.$router.push();

this.$router.replace();

window.location.href = "";

Today, I am going to show you How you convert the object to a string in VueJS?

Table of Content

• Setup the Vue (Optional)
• Create FirstComponent.vue and import it into App.js
• Redirect using Vue Router
• Redirect using the window.location object

This article will guide you to How do I convert the object to array in vueJS

Setup the Vue.js

First, we have to install the Vue project, I had installed the vueJS in my system. If you haven’t installed or have any problem with installation you can follow this article, it will show you step by step process of installation.

How to Install the VueJS project?

Create FirstComponent.vue and import it into App.js

Create the new component in the src/components/ components folder. The component name is FirstComponent.vue and imported into the App.js file:

App.js

<template>
  <FirstComp />
</template>

<script>
import FirstComp from "./components/FirstComp.vue";
export default {
  name: "App",
  components: {
    FirstComp: FirstComp,
  },
};
</script>

Redirect using Vue Router

First, we need to install the vue-router in our project. To install the latest version of vue-router for npm we are going to use this command

  npm install vue-router@4

and for the yarn, we can use this command.

  yarn install vue-router@4

To setup the router and create the routes, you can follow this article this will guide you step by step

How to configure or Install the vue-router module in VueJS?

Redirect using router.push() method

To redirect the user to the new router, we are going to use this.$router.push() method. This method will push the new entry to the history stack and then navigate to the new route.

FirstComp.vue

this.$router.push('/next-route');

In the above example, we are pushing the new entry to the history stack and navigating to the /next-route route. In the above example this.$router is the reference to the router instance and automatically injects every Vue component.

Redirect using router.replace() method

To redirect the user to the new router, we are going to use this.$router.replace() method. This method will replace the current route in the history stack with a new route. If we want to prevent the user to go back to the previous route, then we can use this method.

FirstComp.vue

this.$router.replace('/next-route');

Redirect using the window.location object

There is another way to redirect the user using the window.location object. Using this object we can access the current URL, and also we can set the new URL, and redirect the user to the new page.

window.location.href="/new-route";

In the above example, we are going to set the href property of the window.location object to /new-route. Because of this Browser will navigate to the /new-route link.

All the best 👍.