Le routeur Vue.js

Router.md

Le routeur

Le routeur présente plusieurs avantages:

• Délégation de la navigation avec l'API du navigateur
• Meilleure structuration du projet
• Utilisation d'un layout

Les routes sont définies dans le fichier router/index.js:

Vue.use(Router);

export default new Router({
  mode: 'history',
  routes: [
    ...
    {
      path: '/products',
      name: 'ProductList',
      component: ProductList,
    },
    ...
  ],
});

Une route est, dans la plupart des cas, associée à un composant. Aussi:

• le path permet de déterminer l'URI de la requête.
• On peut donner un nom à la route.

Pour afficher le composant du router, il suffit d'utiliser <router-view></router-view>.

Pour afficher des liens (A, Button) qui navigueront vers d'autres pages gérées par le routeur, il suffit d'utiliser <router-link>:

          <router-link
            class="navbar-item"
            active-class="is-active is-tab"
            :to="{ name: 'ProductList'}">
            Produits
          </router-link>