How to use the go() method In Vue

The go(n) method allows you to navigate to a specific position. The parameter n is an integer that represents the number of steps to go forward (positive) or backward (negative).

Syntax:

router.go(n)

Example: The below JavaScript codes will help you implement the go() method to go back on a page.

Javascript

<!-- src/App.vue file -->
 
<script>
import { RouterView, RouterLink, useRouter, useRoute } from "vue-router";
export default {
  name: "#app",
  setup() {
    const router = useRouter();
    const route = useRoute();
 
    function goBackUsingBack() {
      if (router) {
        router.back();
      }
    }
 
    return { router, route, goBackUsingBack };
  }
}
</script>
<template>
  <nav>
    <RouterLink to="/">Home</RouterLink> | 
    <RouterLink to="/contact">Contact</RouterLink> | 
    <RouterLink to="/about">About</RouterLink><br/><br/>
    <button @click="goBackUsingBack">Go Back Using Back method</button> 
  </nav>
  <RouterView />
</template>
<style>
nav {
  width: 100%;
  font-size: 24px;
}
 
nav a {
  display: inline-block;
  padding: 5px 10px;
  margin: 10px;
}
 
nav a.router-link-exact-active {
  background-color: green;
  text-decoration: none;
  color: #fff;
}
</style>

Javascript

// src/router.js
 
import { createRouter, createWebHistory } from 'vue-router';
import HomeView from './views/HomeView.vue';
import ContactView from './views/ContactView.vue';
import AboutView from './views/AboutView.vue';
 
const router = () =>
  createRouter({
    history: createWebHistory(),
    routes: [
      {
        path: '/',
        name: 'home',
        component: HomeView,
      },
      {
        path: '/about',
        name: 'about',
        component: AboutView,
      },
      {
        path: '/contact',
        name: 'contact',
        component: ContactView,
      },
    ],
  });
 
export default router;

Javascript

// src/main.js file
 
const { createApp } = require('vue');
import App from './App.vue';
import createRouter from './router';
 
createApp(App).use(createRouter()).mount('#app');

Javascript

<!-- views/ContactView.vue file -->
 
<template>
<h1>This is Contact Page</h1>
</template>
<script>
      export default {}
</script>

Javascript

<!-- views/ContactView.vue file -->
 
<template>
<h1>This is Contact Page</h1>
</template>
<script>
      export default {}
</script>

Javascript

<!-- views/AboutView.vue file -->
 
<template>
      <h1>This is About Page</h1>
</template>
<script>
      export default {};
</script>

Output:

How to Go Back/Route-Back on Vue-Router ?

Vue Router is a navigation library designed specifically for Vue.js applications. It empowers developers to construct single-page applications, with dynamic and client-side routing capabilities. A frequent need in web applications is the ability to navigate back or return to the previous page. In this article, we will delve into two different approaches to accomplish this task as listed below:

Table of Content

Using the go() method
Using back() method

Tags:

#Geeks Premier League 2023 #Vue.JS #Geeks Premier League #JavaScript #Web Technologies

Project Structure

Using back() method

How to use the go() method In Vue

Syntax:

Javascript

Javascript

Javascript

Javascript

Javascript

Javascript

How to Go Back/Route-Back on Vue-Router ?

Similar Reads

Contact Us