useRouter composable returns router instance
The useRouter composable returns the router instance. In templates, you can alternatively use $router directly without calling the composable.
composables/use-router
10 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
useRouter identical to vue-router when app/pages/ exists
If you have an app/pages/ directory, useRouter is identical in behavior to the router instance provided by vue-router.
useRouter basic manipulation methods
The router instance provides these methods for basic manipulation: addRoute() adds a new route to the router instance with optional parentName parameter to add as a child route; removeRoute() removes an existing route by its name; getRoutes() gets a full list of all route records; hasRoute() checks if a route with a given name exists; resolve() returns the normalized version of a route location and includes an href property with any existing base.
useRouter history API methods
The router instance provides these methods based on the History API: back() goes back in history if possible, same as router.go(-1); forward() goes forward in history if possible, same as router.go(1); go() moves forward or backward through history without hierarchical restrictions; push() programmatically navigates to a new URL by pushing an entry in the history stack (recommend using navigateTo instead); replace() programmatically navigates to a new URL by replacing the current entry in the history stack (recommend using navigateTo instead).
useRouter navigation guards methods
The useRouter composable provides afterEach, beforeEach and beforeResolve helper methods that act as navigation guards. However, Nuxt recommends using route middleware instead for a better developer experience.
useRouter promise and error handling methods
The router instance provides isReady() which returns a Promise that resolves when the router has completed the initial navigation, and onError which adds an error handler that is called every time a non-caught error happens during navigation.
useRouter universal router instance without app/pages/
If you do not have an app/pages/ folder, useRouter returns a universal router instance with similar helper methods, but not all features may be supported or behave in exactly the same way as with vue-router.
useRouter basic example
Example of using useRouter: const router = useRouter() router.addRoute({ name: 'home', path: '/home', component: Home }) router.removeRoute('home') router.getRoutes() router.hasRoute('home') router.resolve({ name: 'home' })
useRouter history API example
Example of using router history API methods: const router = useRouter() router.back() router.forward() router.go(3) router.push({ path: '/home' }) router.replace({ hash: '#bio' })
addRoute() vs push() difference
router.addRoute() adds route details into an array of routes and is useful while building Nuxt plugins, whereas router.push() triggers a new navigation immediately and is useful in pages, Vue components and composables.