Join two routers in VueJS

You can not have two objects Router in vue .js .

However, the alternative is very elegant.

Use an destructuration identified by three points ... (which he had used without fully understanding it).

This operator returns the remaining elements of an array, that is, those that have not been assigned in a de-structuring .

• First, we make an array or arrays of objects that we can pass to the Router object.

  In addition to the route and the component, we can indicate a name and properties. Or better yet, as @Gustavo García rightly suggests, use nested views. For the moment, we will use these simple routes.

  import rechazosIndex from './rechazos.index'
  import conjuntoIndex from './conjuntos.index'
  import conjuntoDetail from './conjuntos.detail'
  
  export default [
    {path: '/rechazos', component: rechazosIndex},
    {path: '/rechazos/conjuntos/', component: conjuntoIndex, name: 'conjuntoIndex'},
    {path: '/rechazos/conjuntos/:id', component: conjuntoDetail, name: 'conjuntoDetail', props: true}
  ]
  

  The operator ... causes the elements that have not been assigned in a previous restructuring, that is, the rest or the remaining elements (in this case, all >) move to the parent array, which in the example is routes .

• We do the same for the route of the cover and for the routes used in the accreditation.

  In portada.routes.js we have:

  import portadaIndex from './portada.index'
  
  export default [
    {path: '/', name: 'portadaIndex', component: portadaIndex}
  ]
  

  And in index.routes.js we can see:     import Login from './Login'

  export default [
    {path: '/login', name: 'Login', component: Login}
  ]
  

In the end, the final result is this

import Vue from 'vue'
import Router from 'vue-router'

import portadaRoutes from '../components/portada.routes'
import rechazosRoutes from '../components/rechazos/rechazos.routes'
import authRoutes from '../components/login/auth.routes'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    ...portadaRoutes,
    ...rechazosRoutes,
    ...authRoutes
  ]
})

What we wanted to find.

PS: The answer is lcdss in the VueJS forums.

You do not have to write a router for each main URL. Vue.js supports nested routes; that is, to have a main endpoint and under this, have as many routes as you need through the property children . For example:

const router = new VueRoute({
  mode: 'history', // para usar la History API
  routes: [
    {
      path: '/',
      component: PortadaIndex,
      children: [
        {
          path: '/rechazos',
          component: RechazosIndex,
          children: [
            {
              path: '/conjuntos',
              component: ConjuntoIndex,
              children: [
                {
                  path: '/:id',
                  component: ConjuntoDetail
                }
              ]
            },
            {
              path: '/otraruta',
              component: OtraRuta
            }
          ]
        }
      ]
    },
    {
      path: '/login',
      component: Login
    }
  ]
});

It is important that every parent component, such as PortadIndex and RechazosIndex and ConjuntoIndex have a router-view for children to render there:

<template>
  ...
  <transition name="fade">
    <router-view></router-view>
  </transition>
  ...
</template>