Router in Vue 2

router.js

import Vue from 'vue'
import Router from 'vue-router'
import Store from '../store'

Vue.use(Router)

let router = new Router({
  mode: 'history',
  routes: [
    /**
     * Home.
     */
    {
      path: '/',
      name: 'Home',
      component: () => import(/* webpackChunkName: "Home" */ '@/components/Home'),
      meta: {
        isGuest: true,
        title: 'Under Cloud is the ultimate digital research assistant'
      }
    },
    {
      path: '/dashboard',
      name: 'Dashboard',
      component: () => import(/* webpackChunkName: "Dashboard" */ '@/components/dashboard/Dashboard'),
      meta: {
        requiresAuth: true
      }
    },
    {
      path: '/diagnostics/show',
      name: 'ShowDiagnostics',
      component: () => import(/* webpackChunkName: "ShowDiagnostics" */ '@/components/dashboard/ShowDiagnostics'),
      beforeEnter: (to, from, next) => {
        if (Store.getters.getUserRole.userRole > 1) {
          next({
            name: 'Dashboard'
          })
        } else {
          next()
        }
      },
      meta: {
        requiresAuth: true
      }
    },
    /**
     * Assets.
     */
    {
      path: '/assets',
      name: 'ShowFolders',
      component: () => import(/* webpackChunkName: "ShowFolders" */ '@/components/assets/ShowFolders'),
      props: route => {
        document.title = (() => {
          return Store.getters.getPageTitle || 'Assets'
        })()
        return {
          folderId: route.params.folderId
        }
      },
      children: [
        {
          path: '/assets/folders/:folderId',
          name: 'ShowAssets',
          component: () => import(/* webpackChunkName: "ShowAssets" */ '@/components/assets/ShowAssets'),
          props: route => {
            return {
              folderId: route.params.folderId
            }
          },
          meta: {
            requiresAuth: true
          }
        }
      ],
      meta: {
        requiresAuth: true
      }
    }
  ]
})

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!Store.getters.getSignedInStatus.isUserSignedIn) {
      next({
        name: 'Home'
      })
    } else {
      next()
    }
    next()
  } else if (to.matched.some(record => record.meta.isGuest)) {
    next()
  }
})

router.afterEach((to, from) => {
  // Use `nextTick()` to handle router history ( https://github.com/vuejs/vue-router/issues/914#issuecomment-384477609 ).
  Vue.nextTick(() => {
    document.title = to.meta.title || (() => {
      return Store.getters.getPageTitle || 'Under Cloud'
    })()
  })
})

export default router

An example of the backend of to the frontend framework, Vue. Here, the router is used to route authorized users to the appropriate components while routing everyone to somewhere else. I'm using the beforeEach() route guard to handle any exceptions.

Also, it's possible to name components to assist Webpack when it comes to code splitting:

Code splitting is one of the most compelling features of webpack. This feature allows you to split your code into various bundles which can then be loaded on demand or in parallel. It can be used to achieve smaller bundles and control resource load prioritization which, if used correctly, can have a major impact on load time.