Javascript Vue路由器-从JSON构建

我是Vue.js的新手。我习惯了香草式JavaScript。
我需要能够从JSON文件生成路由路径。
我怎样才能做到呢

编辑

例如，假设这是我的JSON：

[
  {
    "name": "Product 1",
    "url": "product-1",
  },
  {
    "name": "Product 2",
    "url": "product-2",
  }
]

---

我基本上需要Vue路由器将

URL/product-1

重定向到产品1的组件（即

），并将

URL/product-2

重定向到产品2的组件（

）

假设您的组件的名称在对象中是

name

，我们需要将您的结构匹配到。 因此，我们可以这样做：

const myRoutes=[
{
“名称”：“产品1”，
“url”：“产品-1”，
},
{
“名称”：“产品2”，
“url”：“产品-2”，
}
]
常量路由器=新的VueRouter({
路线：我的路由器
.map（（{name，url}）=>（{component:name，path:`/${url}'），
})

map函数来匹配API怎么样？正如我所说，我是Vue新手。如何将

.map（）

东西应用到Vue路由器？很抱歉链接出错。我很兴奋。@avi12这个答案不能完全满足我的要求，因为我确实需要将

路由器：

链接到外部文件。除了使用

fetch（）

将在最后给出一个承诺，因此我需要找到一种方法，使

导出默认值

获得一个包含所有路由的

路由器

，作为一个阵列如何延迟加载所有组件，然后定义路由？我想我可以测试这个。知道这样做的最佳技术是什么吗？随便你喜欢。就我个人而言，我使用Webpack chunk加载