javascript - Vue js separate routes in different files -

i creating single page app , separate route files in different files

thta in main routing file index.js have

export default new router({  routes: [    { path: '/', component: hello },    {path :'/users', component: userscontainercomponent,        children:[            {path :'', component: userscomponent},            {path :'/create', component: userscreatecomponent},            {path :'/update', component: usersupdatecomponent},           ]       }, 

] })

now have other functionalities included not users alone hence code becomes huge, how can outsource users routing functionality in file , include reference main routes file

so how can achieve this

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

as make code more readable , manageable.

you can add children route in main route file.

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

inside child routes component can following:

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

basically, can directly take out routes inside children part , make them separate file.