useRouter · Nuxt Composables

pages/index.vue

<script setup lang="ts">
const router = useRouter()
</script>

If you only need the router instance within your template, use $router :

pages/index.vue

<template>
  <button @click="$router.back()">Back</button>
</template>

If you have a pages/ directory, useRouter is identical in behavior to the one provided by vue-router .

Read


                  
                  vue-router

documentation about the


                  
                  Router

interface.

Basic Manipulation

addRoute() : Add a new route to the router instance. parentName can be provided to add new route as the child of an existing route.
removeRoute() : Remove an existing route by its name.
getRoutes() : Get a full list of all the route records.
hasRoute() : Checks if a route with a given name exists.
resolve() : Returns the normalized version of a route location. Also includes an href property that includes any existing base.

Example

const router = useRouter()
router.addRoute({ name: 'home', path: '/home', component: Home })
router.removeRoute('home')
router.getRoutes()
router.hasRoute('home')
router.resolve({ name: 'home' })


                 
                 router.addRoute()

adds route details into an array of routes and it is useful while building Nuxt plugins while


                 
                 router.push()

on the other hand, triggers a new navigation immediately and it is useful in pages, Vue components and composable.

Based on History API

back() : Go back in history if possible, same as router.go(-1) .
forward() : Go forward in history if possible, same as router.go(1) .
go() : Move forward or backward through the history without the hierarchical restrictions enforced in router.back() and router.forward() .
push() : Programmatically navigate to a new URL by pushing an entry in the history stack. It is recommended to use navigateTo instead.
replace() : Programmatically navigate to a new URL by replacing the current entry in the routes history stack. It is recommended to use navigateTo instead.

Example

const router = useRouter()
router.back()
router.forward()