Add router 'prefixWith' helper

Is your feature request related to a problem? Please describe. When using vue router, it’s currently not possible to logically group multiple routes with the same prefix while keeping them at the same router-outlet level of ther others.

Example

// This won't work
const routes = [
  {
    path: '/',
    component: () => import('layouts/frame.vue'),
    children: [
      { path: '', component: () => import('pages/home.vue') },
      { path: 'home', component: () => import('pages/home.vue') },
      {
        path: 'products',
        children: [
          { path: '', component: () => import('pages/products.vue') },
          {
            path: 'type-a',
            component: () => import('pages/product-type-a.vue'),
          },
          {
            path: 'type-b',
            component: () => import('pages/product-type-b.vue'),
          }
        ],
      },
      { path: 'company', component: () => import('pages/company.vue') }
    ],
  },
];

// This will work, but you have to repeat the parent path name
const routes = [
  {
    path: '/',
    component: () => import('layouts/frame.vue'),
    children: [
      { path: '', component: () => import('pages/home.vue') },
      { path: 'home', component: () => import('pages/home.vue') },
      { path: 'products', component: () => import('pages/products.vue') },
      { path: 'products/type-a', component: () => import('pages/product-type-a.vue') },
      { path: 'products/type-b', component: () => import('pages/product-type-b.vue') },
      { path: 'company', component: () => import('pages/company.vue') }
    ],
  },
];

Describe the solution you’d like Current suggested workaround is to create a prefixWith helper, which would already be enough.

Another step would be to detect when component isn’t provided on the parent route and automatically flat it, or add a logical property which serve the same purpose (detect routes to be flattened) but is more explicit about what’s going to happen.

Describe alternatives you’ve considered Adding a notice on the docs linking to the proposed solution from Evan You.

[IlCallo]

My company (Dreamonkey) released a package to address this problem https://github.com/dreamonkey/vue-routes-flattener

[IlCallo]

Here I provided my implementation to automatically detect and flat logical nested routes.

It’s easy to integrate it into index.js Quasar router file