Vue "route helpers" example

helpers.js

/**
 * Helper function to reduce boilerplate in route creation
 *
 * @param {string}    path    The route's path
 * @param {object}    page    A page component definition
 * @param {Function}  page    A function that returns a page import
 * @param {string}    page    A string path to a file in the view/pages folder
 * @param {object}    attrs   Any additional attributes
 */
export function route (path, page, attrs = {}) {
  return { path, component: load(page), ...attrs }
}

export function alias (path, alias, page) {
  return { path, alias, component: load(page) }
}

export function redirect (path, redirect) {
  return { path, redirect }
}

export function hook (path, beforeEnter) {
  return { path, beforeEnter }
}

export function load (page) {
  if (typeof page === 'string') {
    return require('../views/pages/' + page).default
  }
  return page
}

routes.js

import { hook, route } from './helpers'
import { signIn, signOut } from './auth'

export default [
  // -------------------------------------------------------------------------------------------------------------------
  // MAIN
  // -------------------------------------------------------------------------------------------------------------------

  // auth
  hook('/sign-in', signIn),
  hook('/sign-out', signOut),

  // main
  route('/', 'main/Home.vue'),
  route('/about', 'main/About.vue'),

  // -------------------------------------------------------------------------------------------------------------------
  // GLOBAL
  // -------------------------------------------------------------------------------------------------------------------

  // apps
  route('/apps', 'apps/Index.vue'),
  route('/apps/create', 'apps/Create.vue'),
  route('/apps/:appId', 'apps/app/Index.vue', {
    children: [
      route('', 'apps/app/Home.vue'),
      route('edit', 'apps/app/Edit.vue'),
    ]
  }),

  // sites
  route('/sites', 'sites/Index.vue'),

  // -------------------------------------------------------------------------------------------------------------------
  // LOCAL
  // -------------------------------------------------------------------------------------------------------------------

  // site
  route('/site/:siteId', 'sites/site/Index.vue', {
    children: [
      route('', 'sites/site/Home.vue'),
      route('companies', 'sites/site/Companies.vue'),
      route('admin', 'sites/site/Admin.vue'),
    ]
  }),

  // site > company
  route('/company/:siteId/:companyId', 'sites/company/Index.vue', {
    children: [
      route('', 'sites/company/Home.vue'),
      route('apps', 'sites/company/Apps.vue'),
      route('admin', 'sites/company/Admin.vue'),
    ]
  }),

  // site > company > app
  route('/app/:siteId/:companyId/:appId', 'sites/app/Index.vue', {
    children: [
      route('', 'sites/app/Home.vue'),
      route('admin', 'sites/app/Admin.vue'),
      route('logs', 'sites/app/Logs.vue'),
    ]
  }),

  // 404
  route('*', 'error/404.vue'),
]

smart-loader.js

/**
 * Smart loader that loads app, areas or module pages via:
 *
 *    - '<path>'
 *    - '<module>@<path>'
 *    - '<borrower|lender>@<path>'
 *
 * This maps to the actual folder:
 *
 *    - route('foo/edit', 'borrower@foo/Edit')
 *    - areas/borrower/pages/foo/Edit.vue
 *
 * @param {string|object|function} page
 */
export function load (page) {
  if (typeof page === 'string') {
    if (page.includes('@')) {
      const [module, path] = page.split('@')
      // for some reason, webpack seems to be picky about the code used to
      // build paths. Not sure why. Perhaps it's a static analysis thing?
      // Anyway, this nested ifs structure works... so leave it!
      if (/^(borrower|lender|guest)$/.test(module)) {
        return require(`../../areas/${module}/pages/${path}`).default
      }
      return require(`../../modules/${module}/pages/${path}`).default
    }
    return require('../views/pages/' + page).default
  }
  return page
}