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

Question

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

例如

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

作为 router.go 的文档，您需要要重定向到的路径或要重定向到的路由的名称。你没有组件。

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

{ path: '...' }

或路线名称：

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

因此您不需要 return 来自 API 的组件，您可以只 return 路径或路由名称，并使用它重定向到相关页面。

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

Answer 2

我认为您要归档的是基于当前路由以编程方式加载某些组件。

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

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

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

在 $route 上创建一个 watch 以在每次路由更改时加载新组件

<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/ 文件夹中，在你的例子中，你似乎正在调用一个外部服务来获取真正的组件位置，这应该也能工作.

如果这对你有帮助，请告诉我

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

is it possible to specify which component should be used on router.go() in VueJS

vue.js

vue-router