Vue js separate routes in different files

Viewed 11104

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: '/', component: Hello },
   {path :'/users', component: UsersContainerComponent,
       children:[
           {path :'', component: UsersComponent},
           {path :'/create', component: UsersCreateComponent},
           {path :'/update', component: UsersUpdateComponent},

         ]
      },

] })

Now i have other functionalities included not only the users alone hence the code becomes 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.

2 Answers
Related