vue-router

name: vue-router description: "Provides comprehensive guidance for Vue Router including route configuration, navigation, dynamic routes, nested routes, route guards, programmatic navigation, and route meta. Use when the user asks about Vue Router, needs to set up routing, implement navigation guards, handle route parameters, or manage route transitions." license: Complete terms in LICENSE.txt

When to use this skill

Use this skill whenever the user wants to:

• Configure routing in Vue 2 or Vue 3 projects
• Implement dynamic routes, nested routes, and named routes
• Set up navigation guards (beforeEach, beforeResolve, afterEach)
• Use programmatic navigation with router.push, router.replace
• Implement lazy-loaded routes for code splitting
• Handle route meta fields for permissions and layout control

How to use this skill

Workflow

1. Identify the Vue version (Vue 2 uses Vue Router 3.x, Vue 3 uses Vue Router 4.x)
2. Configure routes with the appropriate API
3. Add navigation guards for authentication and authorization
4. Implement lazy loading for large page components

1. Vue Router 4 (Vue 3) Setup

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

const routes = [
  { path: '/', component: () => import('./views/Home.vue') },
  { path: '/users/:id', component: () => import('./views/UserDetail.vue'), props: true },
  {
    path: '/admin',
    component: () => import('./views/Admin.vue'),
    meta: { requiresAuth: true },
    children: [
      { path: 'dashboard', component: () => import('./views/AdminDashboard.vue') },
    ],
  },
];

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

// Navigation guard
router.beforeEach((to, from) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    return { path: '/login' };
  }
});

export default router;

2. Vue Router 3 (Vue 2) Setup

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', component: () => import('./views/Home.vue') },
    { path: '/about', component: () => import('./views/About.vue') },
  ],
});

3. Programmatic Navigation

// Vue 3 with Composition API
import { useRouter } from 'vue-router';

const router = useRouter();
router.push({ name: 'user', params: { id: '123' } });
router.replace('/home');
router.go(-1);

Best Practices

• Centralize route guards for permission checks; lazy-load large page components
• Use named routes with params/query for type-safe navigation; avoid storing sensitive data in routes
• Prefer createWebHistory for clean URLs; configure server-side fallback for HTML5 history mode
• Use route meta fields for layout control, breadcrumbs, and access control

Resources

• Vue Router 4: https://router.vuejs.org/
• Vue Router 3: https://v3.router.vuejs.org/

Keywords

vue router, routing, navigation guards, Vue 3, Vue 2, lazy loading, dynamic routes, nested routes, meta fields, programmatic navigation, createRouter