index.js

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

Vue.use(Router);

const User = {
  template: '<div class="user">\n' +
    '      <h2>User {{ $route.params.id }}</h2>\n' +
    '      <router-view></router-view>\n' +
    '    </div>'
}


export default new Router({
  base: process.env.BASE_URL,
  // base: __dirname,
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import('@/components/LandingPage'),
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('@/components/AboutPage'),
    },
    {
      path: '/browse',
      name: 'browse',
      component: () => import('@/components/BrowsePage'),
    },
    {
      path: '/biomolecular',
      name: 'biomolecular',
      component: () => import('@/components/BiomolecularPage'),
    },
    {
      path: '/synthetic',
      name: 'synthetic',
      component: () => import('@/components/SyntheticPage'),
    },
    {
      path: '/condensate_example',
      name: 'condensate_example',
      component: () => import('@/components/CondensateExample'),
    },
    {
      path: '/protein_example',
      name: 'protein_example',
      component: () => import('@/components/ProteinExample'),
    },
    {
      path: '/statistics',
      name: 'statistics',
      component: () => import('@/components/StatPage'),
    },
    {
      path: '/encyclopedia',
      name: 'encyclopedia',
      component: () => import('@/components/EncycloPage'),
    },
    {
      path: '/protein/:protein',
      name: 'protein',
      component: () => import('@/components/ProteinDetailPage'),
    },
    {
      path: '/condensate/:condensate',
      name: 'condensate',
      component: () => import('@/components/CondensateDetailPage'),
    },
    {
      path: '/profile',
      name: 'profile',
      component: () => import('@/views/Profile'),
    },
    {
      path: '/signup',
      name: 'signup',
      component: () => import('@/views/SignUp'),
    },
    {
      path: '/login',
      name: 'login',
      component: () => import('@/views/Login'),
    },
    {
      path: '/forgotpassword',
      name: 'forgotPassword',
      component: () => import('@/views/ForgotPassword'),
    },
    {
      path: '/resetpassword',
      name: 'resetPassword',
      component: () => import('@/views/ResetPassword'),
    },
    {
      path: '/updateitem/:item',
      name: 'updateItem',
      component: () => import('@/views/UpdateItem'),
    },
    // { path: '/user/:id', component: User },
    // {
    //   path: '*',
    //   redirect: '/',
    // },
  ],
  path: '*', redirect: '/'
})