VueHow-ToBeginner · 3 min read

How to Use Vue Router: Simple Guide with Examples

To use vue-router, first install it and create routes by mapping paths to components. Then, create a router instance and add it to your Vue app with createRouter and createWebHistory. Use <router-link> for navigation and <router-view> to display matched components.

📐

Syntax

The main parts of Vue Router setup include:

createRouter: creates the router instance.
createWebHistory: manages browser history for clean URLs.
routes: an array mapping URL paths to Vue components.
<router-link>: a component to create navigation links.
<router-view>: a placeholder where matched components render.

javascript

import { createRouter, createWebHistory } from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

💻

Example

This example shows a simple Vue app with two pages: Home and About. Navigation uses <router-link>, and the current page content shows inside <router-view>.

javascript

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'

const Home = { template: '<div><h2>Home Page</h2><p>Welcome to the home page!</p></div>' }
const About = { template: '<div><h2>About Page</h2><p>This is the about page.</p></div>' }

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

const app = createApp({
  template: `
    <div>
      <nav>
        <router-link to="/">Home</router-link> |
        <router-link to="/about">About</router-link>
      </nav>
      <router-view></router-view>
    </div>
  `
})

app.use(router)
app.mount('#app')

Output

<nav>Home | About</nav> <h2>Home Page</h2> <p>Welcome to the home page!</p>

⚠️

Common Pitfalls

Forgetting to add app.use(router) so routing won't work.
Using href instead of <router-link> causes full page reloads.
Not including <router-view> in your app template means no component shows.
Incorrect paths or missing components in routes cause navigation errors.

html

/* Wrong: Using <a> tag causes full reload */
// <a href="/about">About</a>

/* Right: Use router-link for SPA navigation */
// <router-link to="/about">About</router-link>

📊

Quick Reference

Feature	Usage
Create router	createRouter({ history: createWebHistory(), routes })
Define routes	[{ path: '/', component: Home }, { path: '/about', component: About }]
Navigation link	About
Display route
Add router to app	app.use(router)

✅

Key Takeaways

Always create a router instance with routes and history before using it in your Vue app.

Use for navigation to avoid full page reloads and keep SPA behavior.

Place in your app template to render the matched route component.

Check your route paths and components carefully to avoid navigation errors.