Vue - The Road to Enterprise/

...

/

Managing Route Components by Feature

Managing Route Components by Feature

Learn to manage route components for product features by arranging the files in the views directory.

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.

Press + to interact
// 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 ...