Router back method in vue

The router back method navigates without to previously opened URL from the history entry, as its name suggests - it navigate back previous route. It is similar to go method with value -1. ie. router.go(-1).

router back method

 1 <template>
 2   <div>
 3     <button @click="redirect">Back</button>
 4   </div>
 5 </template>
 6 
 7 <script setup>
 8 import router from "@/router";
 9 
 10 const redirect = () => {
 11   router.back();
 12 };
 13 </script>

In the above example, a component is define with setup attributes and import router file. A handler function using fat arrow function that call router back() when button click. It goes one backward based on window history.

A component defines with template that includes one button that binds with function handler and on click, it calls handler that redirect one backward.

create router and export

 1 import { createRouter, createWebHistory } from "vue-router";
 2 import HomeView from "../views/HomeView.vue";
 3 import AboutView from "../views/AboutView.vue";
 4 
 5 const routes = [
 6   {
 7     path: "/",
 8     name: "home",
 9     component: HomeView,
 10   },
 11   {
 12     path: "/about",
 13     name: "about",
 14     component: AboutView,
 15   },
 16 ];
 17 // create router using createRouter method
 18 const router = createRouter({
 19   history: createWebHistory(process.env.BASE_URL),
 20   routes,
 21 });
 22 
 23 export default router;