How to use back() method In Vue

Using the go() method

This method is specifically used to navigate back to the previous page in the history, similar to pressing the browser’s back button. You just need to replace your App.vue file with the below file to implement this approach.

Syntax:

router.back()

Example: The below example implements the back() 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

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

Javascript

<!-- views/HomeView.vue file -->
 
<template>
<h1>This is Home 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:

Conclusion:

Navigating within a Vue.js application using Vue Router is pretty simple. You can implement navigation effortlessly by utilizing the back() and go() methods. It’s also important to handle any situations to ensure an user experience regardless of whether users navigate naturally or land directly, on a particular page. Having a grasp of these navigation techniques will allow you to create interactive and user friendly Vue.js applications.

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

Using the go() method

How to use back() method In Vue

Syntax:

Javascript

Javascript

Javascript

Javascript

Javascript

Javascript

Conclusion:

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

Similar Reads

Contact Us