vuejs2 Routing different ways of defining routes

Example

route/index.js

  import About from '@/components/About'

  const router = new Router({
     
    routes: [
     {
       path: '/',
       name: 'home',
       component: {template: "<div>Home</div>"}
     },

     {
       path: '/about',
       component: About
     },

     require('./work').default,
     
     // - NOT FOUND
     {path: '/404', component: {template: "<div>404 not found.</div>"}},
     {path: "/*", redirect: "/404"}
   ]
 });
 
 export default router

route/work.js

import Work from '@/components/Work/Work';
import Workitem from '@/components/Work/Workitem';

export default { 
  path: '/work', 
  name: 'work', 
  component: Work, 
  children: [
    {path: '/all', component: {template: '<div>Some text</div>'}},
    {path: ':id', name: 'work.view', component: Workitem},
    {path: ':id/edit', name: 'work.edit', component: Workitemedit},
  ],
  meta: {requiresAuth: true}
}