materio-d9/web/themes/custom/materiotheme/vuejs/route/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

import Home from 'vuejs/components/Content/Home'
import Base from 'vuejs/components/Content/Base'
import Blabla from 'vuejs/components/Content/Blabla'
import Article from 'vuejs/components/Content/Article'

Vue.use(VueRouter)

// https://www.lullabot.com/articles/decoupled-hard-problems-routing

// We could use aliases to never reload the page on language changement
// BUT beforeupdate is not triggered when push alias instead of path or name
// const languages = ['en', 'fr'];
// console.log('path aliases', (() => languages.map(l => `/${l}/base`))() );

let basePath = drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix;

const routes = [
  {
    name: 'home',
    path: basePath,
    // path: '/',
    // alias: (() => languages.map(l => `/${l}`))(),
    component: Home
    // components: {
    //   'home': Home
    // }
  },
  {
    name:'base',
    path: `${basePath}base`,
    // path: `/base`,
    // alias: (() => languages.map(l => `/${l}/base`))(),
    component: Base,
    // components: {
    //   'base': Base
    // }
  },
  // {
  //   name:'blabla',
  //   path: `${basePath}blabla`,
  //   component: Blabla,
  //   children: [
  //     {
  //       path: `${basePath}blabla/:alias`,
  //       component: Article
  //     }
  //   ]
  // }
  {
    name:'blabla',
    path: `${basePath}blabla`,
    component: Blabla
  },
  {
    name:'article',
    path: `${basePath}blabla/:alias`,
    component: Article,
    // meta: { uuid:null }
  }
  // {
  //   path: '*',
  //   name: 'notfound',
  //   components: {
  //     'notfound': NotFound
  //   }
  // }
]

export default new VueRouter({
  mode: 'history',
  routes: routes
})