I am creating a single page app and i would like to separate the route files in different files

Thta is in my main routing file index.js i have

export default new Router({
 routes: [
   { path: '/', ponent: Hello },
   {path :'/users', ponent: UsersContainerComponent,
       children:[
           {path :'', ponent: UsersComponent},
           {path :'/create', ponent: UsersCreateComponent},
           {path :'/update', ponent: UsersUpdateComponent},

         ]
      },

] })

Now i have other functionalities included not only the users alone hence the code bees huge, How can i outsource the users routing functionality in another file and only include the reference to the main routes file

So how can i achieve something like this

export default new Router({
  routes:[
    {path:'users', .....}// here load users routing in another file

    ]
  })

as this will make the code more readable and manageable.

I am creating a single page app and i would like to separate the route files in different files

Thta is in my main routing file index.js i have

export default new Router({
 routes: [
   { path: '/', ponent: Hello },
   {path :'/users', ponent: UsersContainerComponent,
       children:[
           {path :'', ponent: UsersComponent},
           {path :'/create', ponent: UsersCreateComponent},
           {path :'/update', ponent: UsersUpdateComponent},

         ]
      },

] })

Now i have other functionalities included not only the users alone hence the code bees huge, How can i outsource the users routing functionality in another file and only include the reference to the main routes file

So how can i achieve something like this

export default new Router({
  routes:[
    {path:'users', .....}// here load users routing in another file

    ]
  })

as this will make the code more readable and manageable.

• javascript
• vuejs2
• vue-router

2 Answers 2

I liked disjfa solution: Let’s route a vue app ponent route

import People from '../views/People';
import Wele from './../views/Wele';
import Details from './../views/Details';
import Create from './../views/Create';

export default [
  {
    path: '/people',
    name: 'people',
    ponent: People,
    title: 'People',
    redirect: { name: 'people-wele' },
    children: [
      {
        path: 'wele',
        name: 'people-wele',
        ponent: Wele,
      },
      {
        path: 'create',
        name: 'people-create',
        ponent: Create,
      },
      {
        path: ':id',
        name: 'people-details',
        ponent: Details,
      },
    ],
  },
];

main route

import Vue from 'vue';
import Router from 'vue-router';
import Dashboard from '@/views/Dashboard';
import peopleRoutes from '@/modules/people/router';

Vue.use(Router);

const baseRoutes = [
   ...
];

const routes = baseRoutes.concat(peopleRoutes);
export default new Router({
  routes,
});

You can add children to a route in your main route file.

{
  path: '/events',
  ponent: eventspage,
  children: eventroutes,
},

Inside the child routes ponent you can do the following:

const eventroutes = [
  {
    path: '',
    name: 'eventlist',
    ponent: eventlist,
  },
  {
    path: 'info/:id',
    name: 'eventlist',
    ponent: eventlist,
  },
];

export default eventroutes;

Basically, you can directly take out the routes inside the children part and make them a separate file.