Question

我的大部分路线都受到保护，需要访问权限。当用户成功登录后，我的Navbar组件会进行API调用并检索用户可以访问的一堆路由。

在那之后，我将所有与路由匹配的视图文件添加到导航栏。

这是显示该过程的示例代码

<template>
  <div>
    <router-link
      v-for="navItem in navItems"
      :key="navItem.title"
      :to="navItem.url"
    >{{ navItem.title }}</router-link>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      navItems: []
    };
  },
  created: async function() { // Setup the router here
    this.navItems = [
      // !!! API CALL !!!
      {
        title: "Dashboard",
        url: "/Dashboard"
      },
      {
        title: "Users",
        url: "/users/Users"
      },
      {
        title: "Groups",
        url: "/groups/Groups"
      }
    ];

    const routes = await this.navItems.map(async navItem => {
      const { url } = navItem;

      return {
        path: url,
        component: await import(`../views${url}.vue`)
      };
    });

    this.$router.addRoutes(routes);
  }
};
</script>

不幸的是我得到了这个错误

未捕获（承诺）错误：在[vue-router]中需要“路径” 路由配置。

但是如您在示例代码中看到的那样，此属性已设置。我在这里创建了一个示例项目

https://codesandbox.io/s/vue-routing-example-i2znt

如果您拨打这条路线

https://i2znt.codesandbox.io/#/Dashboard

我希望路由器渲染Dashboard.vue文件。

Answer 1

您构建的routes数组不包含您的routes对象。这是一个许诺。

您应该做类似

的操作

Promise.all(routes).then(resolvedRoutes => {
    this.$router.addRoutes(resolvedRoutes)
})

从api加载路由并动态导入视图

1 个答案: