Free Computer Courses

Vue Router Basics

Updated September 2026 · Beginner-friendly guide

View saved

Install Vue Router

In your Vite + Vue project:

npm install vue-router@4

Create a simple router

Example src/router.js:

import { createRouter, createWebHistory } from "vue-router";
import HomeView from "./views/HomeView.vue";
import AboutView from "./views/AboutView.vue";

export default createRouter({
  history: createWebHistory(),
  routes: [
    { path: "/", component: HomeView },
    { path: "/about", component: AboutView },
  ],
});

Install on the app

In main.js, use the router and place RouterView / RouterLink in App.vue.

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

createApp(App).use(router).mount("#app");

Navigate in templates

Prefer router links for in-app navigation.

<nav>
  <RouterLink to="/">Home</RouterLink>
  <RouterLink to="/about">About</RouterLink>
</nav>
<RouterView />

Related tutorials

Comments

One comment per signed-in account. Comments are saved with this page’s URL.