javascript - Vue Router - build from JSON

Question

I'm quite new to Vue.js. I'm used to vanilla JavaScript.
I need to be able to generate route paths from a JSON file.
How can I achieve it?

EDIT

For example, say this is my JSON:

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

I basically need Vue Router to redirect URL/product-1 to Product 1's component (which will be <Product-1></Product-1>), and URL/product-2 to Product 2's component (<Product-2></Product-2>)

Answer 1

Assuming your component's name is name in the object, we need to match your structure to Vue Router API. Thus, we can do as follows:

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