index.js

import Vue from 'vue';
import VueRouter from 'vue-router';

import VueBodyClass from 'vue-body-class';
import Home from '../views/Home.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: {
      title: 'Platform One',
      bodyClass: 'home-page',
    },
  },
  {
    path: '/products',
    name: 'Products',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "services" */ '@/views/Products.vue'),
    meta: {
      title: 'Platform One | Products',
      bodyClass: 'products-page',
      breadcrumb: 'Products',
    },
  },
  {
    path: '/services',
    name: 'Services',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "services" */ '@/views/Services.vue'),
    meta: {
      title: 'Platform One | Services',
      bodyClass: 'services-page',
      breadcrumb: 'Services',
    },
  },
  {
    path: '/who-we-are',
    name: 'WhoWeAre',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "who-we-are" */ '@/views/WhoWeAre.vue'),
    meta: {
      title: 'Platform One | Who We Are',
      bodyClass: 'who-we-are-page',
      breadcrumb: 'Who We Are',
    },
  },
  {
    path: '/who-we-are/leadership',
    name: 'Leadership',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "who-we-are" */ '@/views/Leadership.vue'),
    meta: {
      title: 'Platform One | Who We Are | Leadership',
      bodyClass: 'leadership-page',
      breadcrumb: 'Leadership Team',
    },
  },
  {
    path: '/products/abms-adce/onboarding/3-day-workshop',
    name: '3DayWorkshop',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(
        /* webpackChunkName: "3-day-workshop" */ '@/views/3DayWorkshop.vue'
      ),
    meta: {
      title:
        'Platform One | Products | The Party Bus Onboarding | 3 Day Workshop',
      bodyClass: '3-day-workshop-page',
      breadcrumb: '3 Day Workshop',
    },
  },
  {
    path: '/products/big-bang/onboarding/gbsd-workshop',
    name: 'GBSDWorkshop',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(
        /* webpackChunkName: "GBSD-workshop" */ '@/views/GBSDWorkshop.vue'
      ),
    meta: {
      title:
        'Platform One | Products | The Party Bus Onboarding | GBSD Workshop',
      bodyClass: 'gbsd-workshop-page',
      breadcrumb: 'GBSD Workshop',
    },
  },
  {
    path: '/products/abms-adce',
    name: 'ADCE',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "adce" */ '@/views/ADCE.vue'),
    meta: {
      title: 'Platform One | Products | The Party Bus',
      bodyClass: 'adce-page',
      breadcrumb: 'The Party Bus',
    },
  },
  { path: '/partybus-onboarding', redirect: '/products/abms-adce/onboarding' },
  {
    path: '/products/abms-adce/onboarding',
    name: 'ADCEOnboarding',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(
        /* webpackChunkName: "adce-onboarding" */ '@/views/ADCEOnboarding.vue'
      ),
    meta: {
      title: 'Platform One | Products | The Party Bus Onboarding',
      bodyClass: 'adce-onboarding-page',
      breadcrumb: 'Onboarding',
    },
  },
  {
    path: '/products/abms-adce/onboarding/faqs',
    name: 'ADCEOnboardingFAQs',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(
        /* webpackChunkName: "adce-onboarding-faqs" */ '@/views/ADCEOnboardingFAQs.vue'
      ),
    meta: {
      title: 'Platform One | Products | The Party Bus Onboarding FAQs',
      bodyClass: 'adce-onboarding-faqs-page',
      breadcrumb: 'FAQs',
    },
  },
  { path: '/bigbangonboarding', redirect: '/products/big-bang/onboarding' },
  { path: '/bigbang-onboarding', redirect: '/products/big-bang/onboarding' },
  {
    path: '/products/big-bang/onboarding',
    name: 'BigBangOnboarding',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(
        /* webpackChunkName: "big-bang-onboarding" */ '@/views/BigBangOnboarding.vue'
      ),
    meta: {
      title: 'Platform One | Products | Big Bang Onboarding',
      bodyClass: 'big-bang-onboarding-page',
      breadcrumb: 'Big Bang Onboarding',
    },
  },
  { path: '/bigbang', redirect: '/products/big-bang' },
  { path: '/big-bang', redirect: '/products/big-bang' },
  {
    path: '/products/big-bang',
    name: 'BigBang',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "big-bang" */ '@/views/BigBang.vue'),
    meta: {
      title: 'Platform One | Products | Big Bang',
      bodyClass: 'big-bang-page',
      breadcrumb: 'Big Bang',
    },
  },
  {
    path: '/contact-us',
    name: 'ContactUs',
    // route level code-splitting
    // this generates a separate chunk (ContactUs.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "ContactUs" */ '@/views/ContactUs.vue'),
    meta: {
      title: 'Platform One | Contact Us',
      bodyClass: 'contact-us-page',
      breadcrumb: 'Contact Us',
    },
  },
];

const router = new VueRouter({
  base: process.env.BASE_URL,
  routes,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition;
    }
    if (to.hash) {
      return {
        selector: to.hash,
      };
    }

    return { x: 0, y: 0 };
  },
});

const vueBodyClass = new VueBodyClass(routes);

// This callback runs before every route change, including on page load.
router.beforeEach((to, from, next) => {
  vueBodyClass.guard(to, next);
  // This goes through the matched routes from last to first, finding the closest route with a title.
  // eg. if we have /some/deep/nested/route and /some, /deep, and /nested have titles, nested's will be chosen.
  const nearestWithTitle = to.matched
    .slice()
    .reverse()
    .find((r) => r.meta && r.meta.title);

  // If a route with a title was found, set the document (page) title to that value.
  if (nearestWithTitle) {
    document.title = nearestWithTitle.meta.title;
  }

  next();
});

export default router;