How to Create Routes in Vue: Simple Guide with Examples

To create routes in Vue, use the vue-router library by defining route objects with path and component properties, then create a router instance with createRouter and pass it to your Vue app using app.use(router). Routes map URLs to components, enabling navigation in your Vue app.

Syntax

Routes are defined as objects with path for the URL and component for the Vue component to show. You create a router with createRouter and specify the history mode with createWebHistory. Finally, you add the router to your Vue app with app.use(router).

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 routes: Home and About. The router is created and added to the app. Navigation links let you switch pages without reloading.

javascript

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

const Home = { template: '<h2>Home Page</h2>' }
const About = { template: '<h2>About Page</h2>' }

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

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

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

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

Output

<nav>Home | About</nav><h2>Home Page</h2> (or <h2>About Page</h2> when clicking About)

Common Pitfalls

• Forgetting to install and import vue-router causes errors.
• Not adding router-view in your template means routes won't display.
• Using href instead of router-link reloads the page instead of navigating smoothly.
• Not matching paths exactly or missing leading slashes can break routing.

javascript

/* Wrong: Missing router-view */
const AppWrong = {
  template: `<div><router-link to="/about">About</router-link></div>`
}

/* Right: Include router-view to show route components */
const AppRight = {
  template: `<div><router-link to="/about">About</router-link><router-view></router-view></div>`
}

Quick Reference

Remember these key points when creating routes in Vue:

• Define routes as objects with path and component.
• Create router with createRouter and createWebHistory.
• Use router-link for navigation links.
• Place router-view in your app to display matched components.
• Register the router with app.use(router).

Key Takeaways

Use vue-router to define routes as path-component pairs for navigation.

Always include in your app to display routed components.

Use for navigation to avoid full page reloads.

Create the router with createRouter and add it to your Vue app with app.use(router).

Check paths carefully and import vue-router correctly to avoid errors.