Search⌘ K
Home
Courses
Vue - The Road to Enterprise

Managing Route Components by Feature

Explore how to organize route components in a Vue application by grouping them within feature-specific folders. Understand how this structure simplifies navigation, route configuration, and project maintenance for large-scale apps. This lesson guides you through effective practices to keep your growing project organized and easier to manage.

We'll cover the following...

Suppose we have a Products view in the views folder example mentioned in the last lesson. Imagine we’re working on an admin dashboard for an e-commerce app. A user should be able to browse products, select a product to see more details about it, and add, update, or delete it. We need to determine how all of this should be handled.

The first thought might be to do it in the same way as when we added the Products view.

Javascript (babel-node)
// routes config
routes: [
  {
    path: '/products',
    name: 'Products',
    component: () => import('@/views/Products.vue')
  },
  {
    path: '/product/:id',
    name: 'ViewProduct',
    component: () => import('@/views/ViewProduct.vue')
  },
  {
    path: '/add-product',
    name: 'AddProduct',
    component: () => import('@/views/AddProduct.vue')
  },
  {
    path: '/edit-product/:id',
    name: 'EditProduct',
    component: () => import('@/views/EditProduct.vue')
  },
  {
    path: '/delete-product/:id',
    name: 'DeleteProduct',
    component: () => import('@/views/DeleteProduct.vue')
  }
]

Our views directory would now contain:

Just for the product feature, we have five new files. Now imagine we have ten or more features that require CRUD functionality. We could quickly end up with a massive amount of files, and it ...