Question

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

原因是我需要从服务器检索数据以了解要定位的正确组件。

我想到的一个解决方案是添加一个类似于：

的全球警卫

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

但是，正如评论所说，我将如何设置“组件” - “to”对象中没有组件属性。（它看起来像是在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提交的链接。

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

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

1 个答案: