Creating a Consistent Vue Router Configuration

{
  "title": "Creating a Consistent Vue Router Configuration",
  "description": "Delve into structuring Vue Router configurations for better scalability and maintainability across your application.",
  "category": "Vue Cursor Rules",
  "rules": [
    {
      "name": "Organize Routes into Modular Files",
      "description": "Break down routes into separate files based on application sections to enhance maintainability.",
      "implementation": [
        {
          "language": "javascript",
          "code": "// routes/admin.js\nexport default [\n  { path: '/admin', component: AdminHome },\n  { path: '/admin/settings', component: AdminSettings },\n];\n\n// routes/user.js\nexport default [\n  { path: '/user', component: UserHome },\n  { path: '/user/profile', component: UserProfile },\n];\n\n// routes/index.js\nimport adminRoutes from './admin';\nimport userRoutes from './user';\n\nconst routes = [\n  ...adminRoutes,\n  ...userRoutes,\n];\n\nexport default routes;"
        }
      ],
      "references": [
        {
          "title": "How to Master Vue Router Best Practices in 2024",
          "url": "https://toxigon.com/vue-router-best-practices"
        }
      ]
    },
    {
      "name": "Use Named Routes for Clarity",
      "description": "Assign names to routes to simplify navigation and enhance code readability.",
      "implementation": [
        {
          "language": "javascript",
          "code": "const routes = [\n  { path: '/about', name: 'about', component: About },\n];\n\n// Navigating using named route\nthis.$router.push({ name: 'about' });"
        }
      ],
      "references": [
        {
          "title": "Vue-router principles to best practices",
          "url": "https://www.mo4tech.com/vue-router-principles-to-best-practices.html"
        }
      ]
    },
    {
      "name": "Implement Lazy Loading for Routes",
      "description": "Enhance application performance by loading route components only when needed.",
      "implementation": [
        {
          "language": "javascript",
          "code": "const routes = [\n  {\n    path: '/dashboard',\n    component: () => import('./views/Dashboard.vue')\n  }\n];"
        }
      ],
      "references": [
        {
          "title": "Top 21 Vue Js Best Practices & Security Tips for 2025",
          "url": "https://www.bacancytechnology.com/blog/vue-js-best-practices"
        }
      ]
    },
    {
      "name": "Define a 404 Route for Undefined Paths",
      "description": "Provide a user-friendly error page for undefined routes to improve user experience.",
      "implementation": [
        {
          "language": "javascript",
          "code": "const routes = [\n  // other routes\n  { path: '*', component: NotFound }\n];"
        }
      ],
      "references": [
        {
          "title": "Vue Router: The Ins and Outs of Navigation in Vue.js",
          "url": "https://leonlovett.dev/vue-router-the-ins-and-outs-of-navigation-in-vue-js/"
        }
      ]
    },
    {
      "name": "Utilize Navigation Guards for Route Protection",
      "description": "Control access to routes by implementing navigation guards for authentication and authorization.",
      "implementation": [
        {
          "language": "javascript",
          "code": "router.beforeEach((to, from, next) => {\n  const isAuthenticated = // Check if the user is authenticated\n  if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {\n    next('/login');\n  } else {\n    next();\n  }\n});"
        }
      ],
      "references": [
        {
          "title": "Common Mistakes When Implementing Vue.js Routes",
          "url": "https://infinitejs.com/posts/common-mistakes-vuejs-routes/"
        }
      ]
    },
    {
      "name": "Set Scroll Behavior for Route Transitions",
      "description": "Ensure consistent scroll positions when navigating between routes.",
      "implementation": [
        {
          "language": "javascript",
          "code": "const router = new Router({\n  scrollBehavior(to, from, savedPosition) {\n    if (savedPosition) {\n      return savedPosition;\n    } else {\n      return { x: 0, y: 0 };\n    }\n  },\n  routes\n});"
        }
      ],
      "references": [
        {
          "title": "Vue-router principles to best practices",
          "url": "https://www.mo4tech.com/vue-router-principles-to-best-practices.html"
        }
      ]
    }
  ]
}```