parsley/app/javascript/router.js

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

import The404Page from './components/The404Page';
import TheAboutPage from './components/TheAboutPage';
import TheCalculator from './components/TheCalculator';
import TheIngredientList from './components/TheIngredientList';
import TheNotesList from './components/TheNotesList';
import TheRecipe from './components/TheRecipe';
import TheRecipeEditor from './components/TheRecipeEditor';
import TheRecipeCreator from './components/TheRecipeCreator';
import TheRecipeList from './components/TheRecipeList';

Vue.use(Router);

const router = new Router({
  routes: []
});

router.addRoutes(
  [
    {
      path: '/',
      redirect: '/recipes'
    },
    {
      path: '/recipes',
      name: 'recipeList',
      component: TheRecipeList
    },
    {
      path: '/recipes/new',
      name: 'new_recipe',
      component: TheRecipeCreator
    },
    {
      path: '/recipes/:id/edit',
      name: 'edit_recipe',
      component: TheRecipeEditor
    },
    {
      path: '/recipe/:id',
      name: 'recipe',
      component: TheRecipe
    },
    {
      path: "/about",
      name: "about",
      component: TheAboutPage
    },
    {
      path: "/calculator",
      name: "calculator",
      component: TheCalculator
    },
    {
      path: "/ingredients",
      name: "ingredients",
      component: TheIngredientList
    },
    {
      path: "/notes",
      name: "notes",
      component: TheNotesList
    },
    {
      path: "/logout",
      name: "logout",
      beforeEnter: (to, from, next) => {
        const $store = router.app.$store;
        $store.dispatch("logout")
          .then(() => next("/"));
      }
    },
    {
      path: '*',
      component: The404Page
    }
  ]
);

export default router;