Mar 10, 2023 Author - Sai gowtham

Vue router Programmatic navigation

vuejs1min read

In the Vue template, we navigate to different routes using <router-link> component but we can also navigate a user to different routes inside vue instance by using $router object.

There is a push method in the $router object which is used to push the user to a different route.

example

<template>
    <div>
       <h1>My first post</h1>
       <button @click="navigateToHome">Go to Home</button>    </div>
</template>

<script>
   export default{
       methods:{
           navigateToHome:function(){
               //navigation path is '/'             this.$router.push('/')           }
       }
   }
</script>

Named routes

For named routes, we need to pass an object with the name of a route to push method.

<template>
    <div>
       <h1>My first post</h1>
       <button @click="navigateToPost">View Post</button>    </div>
</template>

<script>
   export default{
       methods:{
           navigateToPost:function(){
               //name of the route             this.$router.push({name: "post"})           }
       }
   }
</script>

Url params

If we need to add url params programmatically, we need to pass another object called params to push method.

<template>
    <div>
       <h1>My first post</h1>
       <button @click="navigateToPost">View Post</button>    </div>
</template>

<script>
   export default{
       methods:{
           navigateToPost:function(){
               //named route with url params             this.$router.push({name: "post",params:{id:1}})           }
       }
   }
</script>