Using named dynamic routes

Registering all the routes by hand can be time consuming and, when the routes are not known in advance, it is impossible. vue-router lets you register routes with an argument so that you can have links for all the objects in a database and cover other use-cases where the user chooses a route, following some pattern that will result in too many routes to be registered by hand.

Getting ready

Except for the basics on vue-router (refer to the Creating an SPA with vue-router recipe), you won't need any additional information to complete this recipe.

How to do it…

We will open an online restaurant with ten different dishes. We will create a route for every dish.

The HTML layout of our website is the following:

<div id="app">
  <h1>Online Restaurant</h1>
  <ul>
    <li>
      <router-link :to="{ name: 'home' }" exact>
        Home
      </router-link>
    </li>
    <li v-for="i in 10">
      <router-link :to="{ name:...