by Sai gowtham

Vue router Programmatic navigation

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>

Css Tutorials & Demos

How rotate an image continuously in CSS

In this demo, we are going to learn about how to rotate an image continuously using the css animations.

How to create a Instagram login Page

In this demo, i will show you how to create a instagram login page using html and css.

How to create a pulse animation in CSS

In this demo, i will show you how to create a pulse animation using css.

Creating a snowfall animation using css and JavaScript

In this demo, i will show you how to create a snow fall animation using css and JavaScript.

Top Udemy Courses

JavaScript - The Complete Guide 2021 (Beginner + Advanced)
JavaScript - The Complete Guide 2021 (Beginner + Advanced)
64,026 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
284,472 students enrolled
40 hours of video content
View Course
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
152,857 students enrolled
48.5 hours of video content
View Course