vue-routing

Vue Router v4 Patterns

The de-facto router for Vue 3. Use whatever the project has installed; don't introduce a new router lib.

Setup

// src/router/index.ts
import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '@/views/HomeView.vue';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', name: 'home', component: HomeView },
    { path: '/about', name: 'about', component: () => import('@/views/AboutView.vue') }, // lazy
    { path: '/users', name: 'users', component: () => import('@/views/UsersView.vue') },
    { path: '/users/:id', name: 'user-detail', component: () => import('@/views/UserDetailView.vue'), props: true },
    { path: '/:pathMatch(.*)*', name: 'not-found', component: () => import('@/views/NotFoundView.vue') },
  ],
});

export default router;

// src/main.ts
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

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

<!-- App.vue -->
<template>
  <header>
    <RouterLink to="/">Home</RouterLink>
    <RouterLink to="/about">About</RouterLink>
  </header>
  <main>
    <RouterView />
  </main>
</template>

History modes

• createWebHistory() — HTML5 History API (/about, /users/123). Requires server config to fall back to index.html for unmatched routes.
• createWebHashHistory() — hash-based (/#/about). No server config needed; less SEO-friendly.
• createMemoryHistory() — for SSR/testing.

Default to createWebHistory() unless deploying to static host without fallback.

Route definitions

const routes = [
  // Static
  { path: '/', name: 'home', component: HomeView },

  // Dynamic segment
  { path: '/users/:id', name: 'user', component: UserView, props: true },

  // Multiple dynamic segments
  { path: '/posts/:category/:slug', component: PostView },

  // Optional segment (Vue Router v4: use route alias or two routes)
  { path: '/users/:id/:tab?', component: UserView },           // ? means optional in v4

  // Catch-all
  { path: '/:pathMatch(.*)*', component: NotFoundView },

  // Aliases (multiple URLs → one component)
  { path: '/home', component: HomeView, alias: '/' },

  // Redirects
  { path: '/old-path', redirect: '/new-path' },
  { path: '/old-user/:id', redirect: (to) => ({ path: '/users/' + to.params.id }) },
];