Routing and navigation

VueJunior~1 min read

1. What is routing in Vue.js

Routing is a mechanism that allows building a SPA (Single Page Application), in which transitions between pages happen without reloading the browser.

In Vue, routing is handled by the official library vue-router.

2. Installing Vue Router

If your project was created with Vite, simply install the package:

javascript

npm install vue-router

3. Basic router setup

Create the file src/router/index.js (or .ts):

javascript

import { createRouter, createWebHistory } from 'vue-router'
import HomePage from '@/pages/HomePage.vue'
import AboutPage from '@/pages/AboutPage.vue'

const routes = [
  { path: '/', component: HomePage },
  { path: '/about', component: AboutPage }
]

const router = createRouter({
  history: createWebHistory(), // HTML5 history API mode
  routes
})

export default router

4. Connecting the router to the application

In main.js (the entry point):

javascript

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')

Now router is available throughout the application.

5. Displaying the active route - `<router-view>`

In App.vue, insert:

javascript

<template>
  <Header />
  <router-view /> <!-- The content changes here -->
  <Footer />
</template>

<router-view> is a dynamic slot where Vue Router inserts the component that matches the current route.

There are two ways to navigate:

Through the `<router-link>` component

javascript

<template>
  <nav>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </nav>
</template>

This is an analog of <a>, but without a page reload.

javascript

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

function goToAbout() {
  router.push('/about')
}
</script>

<template>
  <button @click="goToAbout">Go to the "About" page</button>
</template>

7. Dynamic routes (with parameters)

You can pass dynamic parameters via :id:

javascript

const routes = [
  { path: '/users/:id', component: UserPage }
]

Accessing the parameters:

javascript

<script setup>
import { useRoute } from 'vue-router'

const route = useRoute()
console.log(route.params.id) // the :id value from the URL
</script>

Example: /users/42 -> route.params.id === '42'

8. Navigating with parameters and query passed

javascript

router.push({
  name: 'user',
  params: { id: 42 },
  query: { tab: 'profile' }
})

The URL will be: /users/42?tab=profile

9. Nested routes

You can build a page hierarchy - a layout plus nested views.

javascript

{
  path: '/dashboard',
  component: DashboardLayout,
  children: [
    { path: '', component: DashboardHome },
    { path: 'settings', component: DashboardSettings }
  ]
}

In DashboardLayout.vue:

javascript

<template>
  <Sidebar />
  <router-view /> <!-- nested pages are inserted here -->
</template>

You can control access to routes (for example, require authentication):

javascript

router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token')
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

You can set meta on routes:

javascript

{ path: '/profile', component: ProfilePage, meta: { requiresAuth: true } }

11. Working with active links

<router-link> automatically adds the CSS class router-link-active for the current route. You can customize it:

javascript

<router-link to="/" active-class="active-link">Home</router-link>

12. History and modes

Vue Router supports 2 modes:

Mode	Description
`createWebHistory()`	Uses the HTML5 History API (clean URLs without `#`)
`createWebHashHistory()`	Uses hashes (`/#/about`), convenient for static hosting

Summary

Routing in Vue.js is implemented via vue-router and allows you to:

Navigate between components without reloading the page,

Use dynamic and nested routes,

Add guards (checks, redirects),

Build layout components and an SPA structure.

Short Answer

Interview ready

Premium

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

Routing and navigation

1. What is routing in Vue.js

2. Installing Vue Router

3. Basic router setup

4. Connecting the router to the application

5. Displaying the active route - `<router-view>`

6. Navigation between pages

Through the `<router-link>` component

Programmatic navigation (via JS)

7. Dynamic routes (with parameters)

Accessing the parameters:

8. Navigating with parameters and query passed

9. Nested routes

10. Protected routes (Navigation Guards)

11. Working with active links

12. History and modes

Summary

Short Answer