What is Vue Router and how do you set it up?

Vue Router is the official routing library for Vue. It maps URL paths to components, so a single-page app can switch between views without a full page reload.

import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]
const router = createRouter({
  history: createWebHistory(),
  routes
})
// In main.js
app.use(router)

Setup has three steps:

• Define a routes array that maps each path to a component.
• Create the router with createRouter() and a history mode.
• Install it with app.use(router).

createWebHistory() gives normal URLs but needs a server fallback to index.html, while createWebHashHistory() needs no server setup but hurts SEO.

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

In templates, <router-link> renders a link that navigates without a page reload. <router-view> renders the component that matches the current URL.