skillbox/client/src/router/index.js

import Vue from 'vue';
// import index from '@/pages/index'
import topic from '@/pages/topic';
import moduleBase from '@/pages/module-base';
import module from '@/pages/module';
import rooms from '@/pages/rooms';
import room from '@/pages/room';
import newRoom from '@/pages/newRoom';
import editRoom from '@/pages/editRoom';
import article from '@/pages/article';
import instrument from '@/pages/instrument';
import instrumentOverview from '@/pages/instrumentOverview';
import submissions from '@/pages/submissions';
import p404 from '@/pages/p404';
import start from '@/pages/start';
import submission from '@/pages/studentSubmission';
import profilePage from '@/pages/profile';
import profile from '@/components/profile/Profile';
import myClass from '@/pages/myClass';
import activity from '@/pages/activity';
import Router from 'vue-router';
import surveyPage from '@/pages/survey';
import styleGuidePage from '@/pages/styleguide';
import moduleRoom from '@/pages/moduleRoom';
import login from '@/pages/login';
import betaLogin from '@/pages/beta-login';
import hello from '@/pages/hello';
import registration from '@/pages/registration';
import checkEmail from '@/pages/check-email';
import emailVerification from '@/pages/email-verification';
import licenseActivation from '@/pages/license-activation';
import forgotPassword from '@/pages/forgot-password';
import joinClass from '@/pages/joinClass';
import oldClasses from '@/pages/oldClasses';
import createClass from '@/pages/createClass';
import showCode from '@/pages/showCode';
import news from '@/pages/news';
import onboarding from '@/pages/onboarding';
import onboardingStart from '@/pages/onboarding/start';
import onboardingStep1 from '@/pages/onboarding/step1';
import onboardingStep2 from '@/pages/onboarding/step2';
import onboardingStep3 from '@/pages/onboarding/step3';
import portfolioRoutes from './portfolio.routes';

import store from '@/store/index';

const ONBOARDING_STEP_1 = 'onboarding-step-1';
const ONBOARDING_STEP_2 = 'onboarding-step-2';
const ONBOARDING_STEP_3 = 'onboarding-step-3';

const routes = [
  {
    path: '/',
    name: 'home',
    component: start
  },
  {
    path: '/login',
    name: 'login',
    component: login,
    meta: {
      layout: 'public',
      public: true
    }
  },
  {
    path: '/hello',
    name: 'hello',
    component: hello,
    meta: {
      layout: 'public',
      public: true
    }
  },
  {
    path: '/beta-login',
    name: 'betaLogin',
    component: betaLogin,
    meta: {
      layout: 'public',
      public: true
    }
  },
  {
    path: '/module/:slug',
    component: moduleBase,
    children: [
      {
        path: '',
        name: 'module',
        component: module,
        meta: {filter: true}
      },
      {
        path: 'submissions/:id',
        name: 'submissions',
        component: submissions,
        meta: {filter: true}
      }
    ]
  },
  {path: '/rooms', name: 'rooms', component: rooms, meta: {filter: true}},
  {path: '/new-room/', name: 'new-room', component: newRoom},
  {path: '/edit-room/:id', name: 'edit-room', component: editRoom, props: true},
  {path: '/room/:slug', name: 'room', component: room, props: true},
  {
    path: '/module-room/:slug',
    name: 'moduleRoom',
    component: moduleRoom,
    props: true,
    meta: {layout: 'fullScreen'}
  },
  {path: '/article/:slug', name: 'article', component: article, meta: {layout: 'simple'}},
  {
    path: '/instruments/',
    name: 'instrument-overview',
    component: instrumentOverview
  },
  {path: '/instrument/:slug', name: 'instrument', component: instrument, meta: {layout: 'simple'}},
  {path: '/submission/:id', name: 'submission', component: submission, meta: {layout: 'simple'}},
  ...portfolioRoutes,
  {path: '/topic/:topicSlug', name: 'topic', component: topic, alias: '/book/topic/:topicSlug'},
  {
    path: '/me',
    component: profilePage,
    children: [
      {path: 'profile', name: 'profile', component: profile, meta: {isProfile: true}},
      {path: 'my-class', name: 'my-class', component: myClass, meta: {isProfile: true}},
      {path: 'activity', name: 'activity', component: activity, meta: {isProfile: true}},
      {path: '', name: 'profile-activity', component: activity, meta: {isProfile: true}},
      {
        path: 'old-classes',
        name: 'old-classes',
        component: oldClasses,
        meta: {isProfile: true}
      },
      {path: 'create-class', name: 'create-class', component: createClass, meta: {layout: 'simple'}},
      {path: 'show-code', name: 'show-code', component: showCode, meta: {layout: 'simple'}},
    ]
  },
  {path: 'join-class', name: 'join-class', component: joinClass, meta: {layout: 'public'}},
  {
    path: '/survey/:id',
    component: surveyPage,
    name: 'survey',
    props: true,
    meta: {layout: 'simple'}
  },
  {
    path: '/register',
    component: registration,
    name: 'registration',
    meta: {
      public: true,
      layout: 'public',
    }
  },
  {
    path: '/check-email',
    component: checkEmail,
    name: 'checkEmail',
    meta: {
      public: true,
      layout: 'public'
    }
  },
  {
    path: '/verify-email',
    component: emailVerification,
    name: 'emailVerification',
    meta: {
      public: true,
      layout: 'public'
    }
  },
  {
    path: '/license-activation',
    component: licenseActivation,
    name: 'licenseActivation',
    meta: {
      layout: 'public'
    }
  },
  {
    path: '/forgot-password',
    component: forgotPassword,
    name: 'forgotPassword',
    meta: {
      layout: 'public',
      public: true
    }
  },
  {
    path: '/news',
    component: news,
    name: 'news'
  },
  {
    path: '/onboarding',
    component: onboarding,
    children: [
      {
        path: '',
        component: onboardingStart,
        name: 'onboarding-start',
        meta: {
          layout: 'blank',
          next: ONBOARDING_STEP_1
        },
      },
      {
        path: 'learning',
        component: onboardingStep1,
        name: ONBOARDING_STEP_1,
        meta: {
          layout: 'blank',
          next: ONBOARDING_STEP_2,
          illustration: 'contents'
        },
      },
      {
        path: 'collaboration',
        component: onboardingStep2,
        name: ONBOARDING_STEP_2,
        meta: {
          layout: 'blank',
          next: ONBOARDING_STEP_3,
          illustration: 'rooms'
        },
      },
      {
        path: 'portfolio',
        component: onboardingStep3,
        name: ONBOARDING_STEP_3,
        meta: {
          layout: 'blank',
          next: 'home',
          illustration: 'portfolio'
        },
      },
    ]
  },
  {path: '/styleguide', component: styleGuidePage},
  {
    path: '*',
    component: p404,
    meta: {
      layout: 'blank'
    }
  }
];

Vue.use(Router);

const router = new Router({
  routes,
  mode: 'history',
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition;
    }
    return {x: 0, y: 0};
  }
});

router.afterEach((to, from) => {
  store.dispatch('showMobileNavigation', false);
});
export default router;