Skip to main content

What is Vue Router?

VueJunior~1 min read
Suggest an edit

Vue Router is the official router for Vue.js, which lets you create multi-page behavior inside a single-page application (SPA).

In other words:

Vue Router manages transitions between pages/screens inside a Vue application without reloading the page.

This is what makes your Vue application a true SPA.

What does Vue Router do?

1. Manages the URL in the browser

For example:

/home /users /users/10 /products?sort=price

2. Links URLs to components

For example:

js
{ path: '/users', component: UsersPage }

3. Lets you build navigation

Via <router-link>:

html
<router-link to="/users">Users</router-link>

4. Changes views without reloading

It substitutes components into <router-view>:

html
<router-view />

5. Manages history (the history API)

You can use:

  • history mode (clean URLs)
  • hash mode (/#/users)

6. Supports nested routes

For example:

/users /users/10 /users/10/profile

7. Passes parameters

For example:

/users/:id

A minimal Vue Router example

router/index.js:

js
import { createRouter, createWebHistory } from 'vue-router' import Home from '@/pages/Home.vue' import About from '@/pages/About.vue' const routes = [ { path: '/', component: Home }, { path: '/about', component: About } ] export const router = createRouter({ history: createWebHistory(), routes })

main.js:

js
import { createApp } from 'vue' import App from './App.vue' import { router } from './router' createApp(App).use(router).mount('#app')

App.vue:

html
<router-link to="/">Home</router-link> <router-link to="/about">About</router-link> <router-view />

Vue Router capabilities

Navigation

  • router.push('/users')
  • router.replace()
  • router.back()

Dynamic routes

  • /users/:id

Getting parameters

js
const route = useRoute() console.log(route.params.id)

Route guards

  • beforeEnter
  • beforeEach
  • beforeRouteLeave

Used for authorization, access checks, and so on.

Programmatic navigation

router.push({ name: 'product', params: { id: 10 } })

Lazy-loading components

Routes are loaded on demand.

Summary (ideal for an interview)

Vue Router is Vue's official router, which manages navigation, URLs, history, parameters, and page rendering in an SPA. It links a path to a component, and supports nested routes, guards, transitions, lazy-loading, and programmatic navigation.

Short Answer

Interview ready
Premium

A concise answer to help you respond confidently on this topic during an interview.

Suggest an edit