Cacher is the code snippet organizer for pro developers

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

import Index from '~/components/Index'

// all routes are handled by Index Component. 
// "path" argument might looks like "/blog/my-awesome-blog-post"
export function createRouter () {
  const router = new Router({
    mode: 'history',
    routes: [
      {
        path: '/:path*',
        component: Index
      }
    ]
  })
  return router
}

export default {

  getAsyncDataFromRoute (route) {

    // pour les types de contenu "page"
    if (route != undefined && route.entity.entityBundle == 'page') {
      const data = {
        route,
        currentComponent: 'Page',
        componentData: {
          node: route.entity
        }
      }
      return data
    }
    // par défaut
    return {
      currentComponent: 'ComponentNotFound',
      route,
      componentData: {}
    }

  }

}

<template>
  <div>
    <component :is="currentComponent" :componentData="componentData" />
    <div id="route-debug">
      <pre>{{route}}</pre>
    </div>
  </div>
</template>

<script>
import routeByPath from '~/apollo/queries/routeByPath'
import indexController from '~/components/indexController'
export default {
  components: {
    ComponentNotFound: () => import('~/components/ComponentNotFound'),
    Page: () => import('~/components/contentTypes/Page')
  },
  data: () => ({
    componentData: {},
    currentComponent: null,
    route: {}
  }),
  asyncData ({ params, app }) {
    return app.apolloProvider.defaultClient.query({ 
      query: routeByPath,
      variables : {path: '/' + params.path}
      }).then(result => {
        return indexController.getAsyncDataFromRoute(result.data.route)
      }).catch(error => {
         console.log(error)
      })
  }
}
</script>