Dynamic components

DynamicLoader.vue

<template>
  <!-- doc: https://vuejs.org/v2/guide/components.html#Dynamic-Components -->
  <component :is="comp"></component>
</template>

<script>
// Just a fallback component
import EmptyComp from "./EmptyComp";

export default {
  name: "DynamicLoader",
  data: () => ({
    comp: EmptyComp
  }),
  methods: {
    updateComponent(route) {
      console.log(route);

      // This is a async component factory
      // https://vuejs.org/v2/guide/components-dynamic-async.html#Handling-Loading-State
      this.comp = () => {
        // Implement your logic here and produce a Future<Component>
        let component = EmptyComp;
        if (route.params.comp === "a") {
          component = import("./ComponentA.vue");
        } else if (route.params.comp === "b") {
          component = import("./ComponentB.vue");
        }

        return {
          component
        };
      };
    }
  },
  created() {
    this.updateComponent(this.$route);
  },
  // https://router.vuejs.org/guide/essentials/dynamic-matching.html#reacting-to-params-changes
  watch: {
    $route(to) {
      this.updateComponent(to);
    }
  }
};
</script>

router.js

import Vue from "vue";
import Router from "vue-router";
import DynamicLoader from "./DynamicLoader.vue";

Vue.use(Router);

export default new Router({
  mode: "history",
  base: process.env.BASE_URL,
  routes: [
    {
      path: "/:comp",
      name: "home",
      component: DynamicLoader
    }
  ]
});