Loading different components based on route param in Vue Router

Question

I'm building an editor app which supports multiple design templates. Each design template has wildly different set of fields so they each has their own .vue file.

I'm trying to dynamically load the corresponding view component file based on params. So visiting /editor/yellow-on-black would load views/designs/yellow-on-black.vue etc.

I've been trying to do it like this

{
  path: '/editor/:design',
  component: () => {
    return import(`../views/designs/${route.params.design}`)
  }
}

But of course route is not defined. Any idea on how to work around this?

Where's that route variable come from ?

cantdocpp
– cantdocpp

2021-02-24 15:06:57 +00:00
Commented Feb 24, 2021 at 15:06 — cantdocpp
– cantdocpp, Commented Feb 24, 2021 at 15:06

tony19 · Accepted Answer · 2022-07-15 22:21:59Z

The route's component option is only evaluated once, so that won't work. Here's a solution using a Dynamic.vue view which uses a dynamic component based on the route param.

Use a simple route definition with route param. I changed the param name to dynamic:

import Dynamic from '@/views/Dynamic.vue';

{
  path: "/editor/:dynamic",
  component: Dynamic
}

Create a generic Dynamic.vue component that dynamically loads a component from the route param. It expects the param to be called dynamic:

<template>
  <component v-if="c" :is="c" :key="c.__file"></component>
</template>

<script>
export default {
  data: () => ({
    c: null
  }),
  methods: {
    updateComponent(param) {
      // The dynamic import
      import(`@/components/${param}.vue`).then(module => {
        this.c = module.default;
      })
    }
  },
  beforeRouteEnter(to, from, next) {
    // When first entering the route
    next(vm => vm.updateComponent(to.params.dynamic));
  },
  beforeRouteUpdate(to, from, next) {
    // When changing from one dynamic route to another
    this.updateComponent(to.params.dynamic);
    next();
  }
}
</script>

Collectives™ on Stack Overflow

Loading different components based on route param in Vue Router

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related