Vue 路由器 - 从 JSON 构建

Question

我对 Vue.js 还是很陌生。我习惯于原生 JavaScript。
我需要能够从 JSON 文件生成路由路径。
我怎样才能实现它？

编辑

例如，假设这是我的 JSON：

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

我基本上需要 Vue 路由器将 URL/product-1 重定向到产品 1 的组件（将是 <Product-1></Product-1>），并将 URL/product-2 重定向到产品 2 的组件（<Product-2></Product-2>）

Answer 1

假设您的组件在对象中的名称是name，我们需要将您的结构与Vue Router API 匹配。 因此，我们可以这样做：

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

const router = new VueRouter({
  routes: myRouters
          .map(({name, url})=>({component: name, path: `/${url}`)),
})