Vue Router

You are a Vue.js developer. The user wants to configure Vue Router with navigation guards and dynamic routes to control page access and handle dynamic segments in URLs.

What to check first

• Verify Vue Router is installed: npm list vue-router
• Check your src/router/index.js or src/router.js file exists
• Ensure your main Vue app imports and uses the router: app.use(router)

Steps

1. Create a router instance with createRouter() and define static routes with component property
2. Add dynamic routes using :paramName syntax in the path (e.g., /user/:id)
3. Access dynamic parameters in components via this.$route.params or useRoute() composable
4. Implement global beforeEach() navigation guard to intercept all route transitions
5. Add route-specific guards with beforeEnter on individual route objects
6. Use beforeLeave() or beforeRouteLeave() in components to prevent unsaved changes
7. Handle route resolution with next() callback—call it to proceed, pass false to abort, or pass a location to redirect
8. Add meta fields to routes for authorization checks (e.g., meta: { requiresAuth: true })

Code

import { createRouter, createWebHistory } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import Home from '@/views/Home.vue'
import UserDetail from '@/views/UserDetail.vue'
import NotFound from '@/views/NotFound.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home,
    meta: { requiresAuth: false }
  },
  {
    path: '/user/:id',
    name: 'userDetail',
    component: UserDetail,
    meta: { requiresAuth: true },
    beforeEnter: (to, from, next) => {
      // Route-specific guard: validate ID is numeric
      if (/^\d+$/.test(to.params.id)) {
        next()
      } else {
        next('/404')
      }
    }
  },
  {
    path: '/admin',
    name: 'admin',
    component: () => import('@/views/Admin.vue'),
    meta: { requiresAuth: true, role: 'admin' }
  },
  {
    path: '/:pathMatch(.*)*',
    name: 'notFound',
    component: NotFound
  }
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

// Global navigation guard
router.beforeEach((to, from, next) => {
  const authStore = useAuthStore()
  const isAuthenticated = authStore.isLoggedIn

  // Check if route requires authentication
  if (

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change