title: Vue js separate routes in different files
body: <p>I am creating a single page app and i would like to separate the route files in different files</p>
  
  <p>Thta is in my main routing file index.js i have</p>
  
  <pre><code>export default new Router({
   routes: [
     { path: '/', component: Hello },
     {path :'/users', component: UsersContainerComponent,
         children:[
             {path :'', component: UsersComponent},
             {path :'/create', component: UsersCreateComponent},
             {path :'/update', component: UsersUpdateComponent},
  
           ]
        },
  </code></pre>
  
  <p>]
  })</p>
  
  <p>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</p>
  
  <p>So how can i achieve something like this</p>
  
  <pre><code>export default new Router({
    routes:[
      {path:'users', .....}// here load users routing in another file
  
      ]
    })
  </code></pre>
  
  <p>as this will make the code more readable and manageable.</p>