javascript - 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>）

标签： javascriptjsonvue.jsvue-router

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}`)),
})