enfrancais-app/src/router/routes.js

import Home from '@/pages/Home'
import TextOptions from '@/pages/_partials/TextOptions'


export default [
  {
    name: 'home',
    path: '/',
    component: Home
  },

  {
    name: 'introduction',
    path: '/intro',
    component: () => import(/* webpackChunkName: "intro" */ '@/pages/Introduction')
  },

  {
    name: 'contact',
    path: '/contact',
    component: () => import(/* webpackChunkName: "contact" */ '@/pages/Contact')
  },

  {
    name: 'library',
    path: '/library',
    components: {
      default: () => import(/* webpackChunkName: "library" */ '@/pages/Library'),
      options: TextOptions
    },
    props: {
      default: ({ query }) => {
        let { mode = 'tree-map', texts = [] } = query
        if (typeof texts === 'string') texts = [texts]
        // In case of a reload or direct link, vue-router doesn't turn the query string into an array.
        if (texts && texts.length && typeof texts[0] === 'string') {
          texts = texts.map(text => text.split(',').map(id => parseInt(id)))
        }
        return { mode, texts }
      },
      options: ({ query }) => ({
        show: !('texts' in query && query.texts.length)
      })
    }
  },

  {
    name: 'kit',
    path: '/kit',
    component: () => import(/* webpackChunkName: "kit" */ '@/pages/Kit')
  },

  {
    name: 'gallery',
    path: '/gallery',
    component: () => import(/* webpackChunkName: "gallery" */ '@/pages/Gallery')
  },

  {
    name: 'blog',
    path: '/blog',
    component: () => import(/* webpackChunkName: "blog" */ '@/pages/Blog')
  },

  // TEMP
  {
    name: 'map',
    path: '/map',
    component: () => import(/* webpackChunkName: "test" */ '@/pages/Map')
  },

  {
    name: 'notfound',
    path: '/404',
    alias: '*',
    component: () => import(/* webpackChunkName: "404" */ '@/pages/NotFound.vue')
  }
]