在Vue Router中根据路由参数加载不同的组件

Question

我正在构建一个支持多个设计模板的编辑器应用程序。每个设计模板都有截然不同的字段集，因此它们都有自己的.vue文件。

我正在尝试根据参数动态加载相应的视图组件文件。所以访问/editor/yellow-on-black会加载views/designs/yellow-on-black.vue等等。

我一直在尝试这样做

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

但当然route没有定义。关于如何解决这个问题有什么想法吗？

Answer 1

该路线的component选项仅评估一次，因此不起作用。这是使用视图的解决方案，Dynamic.vue该视图使用基于路由参数的动态组件。

使用带有路由参数的简单路由定义。我将参数名称更改为dynamic：

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

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

创建一个通用Dynamic.vue组件，从路由参数动态加载组件。它期望调用该参数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>