Question

在VueJS中我试图设置一个场景，其中使用的组件由url路径确定，而不必静态映射它。

e.g。

router.beforeEach(({ to, next }) => {


  FetchService.fetch(api_base+to.path)
    .then((response) => {
      router.app.$root.page = response

      // I'd like to specify a path and component on the fly 
      // instead of having to map it

      router.go({path: to.path, component: response.pageComponent})

    })
    .catch((err) => {
      router.go({name: '404'})
    })

})

基本上，我希望能够动态创建路线，而不是静态指定router.map

中的路径和组件

希望有意义。任何帮助，将不胜感激。

Answer 1

我认为您尝试归档的内容是以编程方式根据当前路由加载某些组件。

我不确定这是否是推荐的解决方案，但我想到了。

为组件创建一个DynamicLoader组件作为模板

<template>
<component :is="CurrentComponent" />
</template>

在$ route上创建一个监视以在每个路由更改中加载新组件

<script>
export default {
  data() {
    return {
      CurrentComponent: undefined
    }
  },
  watch: {
    '$route' (to, from) {
      let componentName = to.params.ComponentName;
      this.CurrentComponent = require(`components/${componentName}`);
    }
  },
  beforeMount() {
    let componentName = this.$route.params.ComponentName;
    this.CurrentComponent = require(`components/${componentName}`);
  }
}
</script>

在路由器上注册此路线

{ path: '/:ComponentName', component: DynamicLoader }

在这个示例中，我假设我的所有组件都在components/文件夹中，在您的示例中，您似乎正在调用外部服务来获取真实的组件位置，这应该可行同样。

如果这有帮助，请告诉我

Answer 2

As par the documentation of router.go上显示同级

，您需要要重定向到的路径或要重定向到的路径的名称。你没有这个组件。

router.go的参数是以下形式的路径：

{ path: '...' }

或路线名称：

{
  name: '...',
  // params and query are optional
  params: { ... },
  query: { ... }
}

因此您不需要从API返回组件，只需返回路径或路径名称，并使用它重定向到相关页面。

您可以使用vue-router创建更多详细信息here以创建命名路由。

是否可以指定应该在VueJS中的router.go（）上使用哪个组件

2 个答案: