Vue-router

Rappels

URL

Une URL est formé. de plusieurs parties :

<protocol>://<hostname>:<port>/chemin/ou/path/en/anglais?querystring=optionnelle#hash-optionel

Exemple :

https://example.com/ : ici, le protocol est https, le nom d’hôte example.com, et le port n’est pas indiqué, ce qui signifie que c’est le port par défaut du protocol qui est utilisé (443 pour https, 80 pour http), et le chemin est /. Il n’y a ni querystring ni hash.

La partie protocol + nom d’hôte + port est appelée origine.

Les SPA

Vue, React, Svelte et d’autres frameworks/bibliothèques de composants permettent de faire ce que l’on appelle des SPA : des applications en une seule page (Single Page Applications) : la page HTML sera téléchargée une seule fois, avec un fichier JavaScript qui contiendra, lui, le code nécessaire pour modifier le DOM de la page sans jamais la recharger.

Depuis plusieurs années il est possible de changer programmatiquement la route (la partie de l’URL après l’origine) dans la barre d’adresse du navigateur sans recharger la page.

Pouvoir mettre en favori une page est important. C’est pourquoi même dans une SPA, il est souhaitable d’utiliser une bibliothèque pour associer une route à un composant.

Utilisation d’un routeur

Vue-router permet justement d’associer un composant avec un chemin.

routes.js

import AppHome from './views/AppHome.vue'
import AppAbout from './views/AppAbout.vue'

const routes = [ // Liste des routes de l’application
  {
    path: '/', // association de la route / avec...
    component: AppHome // ... le composant AppHome.vue
  },
  {
    path: '/about', // association de la route /about avec...
    component: AppAbout // ...le composant AppAbout.vue
  },
]

export default routes

router.ts

import { createRouter, createWebHistory } from 'vue-router'

import routes from './routes.js'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
})

export default router

main.ts

import './assets/main.css' // import des styles globaux

import { createApp } from 'vue' // import de createApp de vue

import App from './App.vue' // import du composant principal de l’application
import router from './router' // import du router

const app = createApp(App) // création de l’application à partir du composant principal

app.use(router) // utilisation du router en tant que plugin

app.mount('#app') // montage de l’application dans l’élément qui a pour id `app` dans `index.html`