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: '/condensates',
    //   name: 'condensates',
    //   component: () => import('@/components/BrowsePage'),
    // },
    {
      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: '/user/:id', component: User },
    // {
    //   path: '*',
    //   redirect: '/',
    // },
  ],
  path: '*', redirect: '/'
})