如何在Vue路由器中动态设置目标组件

Question

我正在尝试为 vue-router 路由动态设置目标组件。

原因是我需要从服务器检索数据才能知道要定位的正确组件。

我想到的一个解决方案是添加一个类似于以下内容的全局警卫：

router.beforeEach((to, from, next) => {
  get_data_from_server(to.fullPath).then(() => {
    // set the "to" component, but how?
    next();
})

但是，正如评论所说，我将如何设置“组件”-“到”对象中没有组件属性。 （看起来它在 components.default.render 中，但没有记录，看起来不应该被弄乱。）

另一种选择是使用上述逻辑，但添加特殊情况代码进行重定向，但后来我发现无法创建针对正确组件的动态/新路由。

应该如何创建一条通往在构建时未知的目的地的路线？

Answer 1

这个解决方案似乎有效。

router.beforeEach((to, from, next) => {
  get_data_from_server(to.fullPath).then(component => {
    if (to.matched.length === 0) {
      // the target route doesn't exist yet
      router.addRoutes({path: to.path, component: component})
      next(to.fullPath)
      return
    } else {
      // the route and component are known and data is available
      next()
    }
})

关键是在我上面的评论中找到了链接，该链接显示了实现 addRoutes() 的 vue-router 提交。

需要注意的一点是，在末尾添加了新路由（这是有道理的），因此存在的任何通配符都可能会产生意外匹配。我有一条包罗万象的路线，可以重定向到默认页面。但它在新添加的匹配之前匹配，因为它在列表之前。这导致了堆栈溢出。实际上if (to.matched.length === 0)之后的代码是默认路由。