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

【问题标题】：Loading different components based on route param in Vue Router在 Vue Router 中根据路由参数加载不同的组件
【发布时间】：2021-05-26 21:27:12
【问题描述】：

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

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

我一直在尝试这样做

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

当然route 没有定义。关于如何解决这个问题的任何想法？

【问题讨论】：

路由变量从何而来？

标签： vue.js vue-router

【解决方案1】：

路由的component 选项只评估一次，所以这不起作用。这是一个使用Dynamic.vue 视图的解决方案，该视图使用基于路由参数的dynamic component。

使用带有路由参数的简单路由定义。我将参数名称更改为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>

【讨论】：