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

我的大多数路由都受到保护，需要权限才能访问它们。当用户成功登录my

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>

{{navItem.title}}
导出默认值{
数据：函数（）{
返回{
导航项：[]
};
},
已创建：async function（）{//在此处设置路由器
此.navItems=[
//！！！API调用！！！
{
标题：“仪表板”，
url:“/Dashboard”
},
{
标题：“用户”，
url:“/users/users”
},
{
标题：“团体”，
url:“/groups/groups”
}
];
const routes=wait this.navItems.map（异步navItem=>{
const{url}=navItem；
返回{
路径：url，
组件：等待导入（`../views${url}.vue`）
};
});
此.$router.addRoutes（路由）；
}
};

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

未捕获（承诺中）错误：[vue路由器]“路径”在 路由配置

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

如果你叫这条路线

---

我希望路由器呈现

Dashboard.vue

文件。

您构建的路由数组不包含路由对象。 这是一系列的承诺

你应该这样做

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