Du coup cette partie va être rapide ? Oui, très, car très simple !
En fait, la transition s'implique lorsqu'il y a un changement... Et qu'est-ce qui change quand on change de page ?
router-view ? Exaaaccct ! On va donc pouvoir utiliser les transitions sur cet élément. Mais il va falloir les coupler avec des composants dynamiques comme suit :
{"language":"text/html","content":"<template>\n <div id=\"nav\">\n <router-link :to=\"{name:'Home'}\" custom v-slot=\"{ navigate, href, isActive }\">\n <a :href=\"href\" @click=\"navigate\" :class=\"isActive ? 'router-link-active router-link-exact-active' : ''\"><span\n class=\"material-icons\">home</span>Home</a>\n </router-link> |\n <router-link :to=\"{name:'News.All'}\">Consulter les actualités</router-link> |\n <router-link :to=\"{name:'Legals'}\">Mentions légales</router-link> |\n <router-link :to=\"{name:'Connexion'}\">Connexion</router-link>\n </div>\n <router-view v-slot=\"{ Component }\">\n <transition name=\"fade\">\n <component :is=\"Component\" />\n </transition>\n </router-view>\n</template>\n","filename":"App.vue"}
En effet, de base, le composant router-view n'a pas de transition. On doit donc utiliser les slots. Mais toujours garder le comportement souhaité : pas le choix, v-slot et composant dynamique ! Ce n'est pas pour rien que je faisais l'analogie au début ;).
Tu n'as plus qu'à mettre un peu de style, et le tour est joué !
{"language":"text/html","content":"<style>\n .fade-enter-active,\n .fade-leave-active {\n transition: opacity 0.5s ease;\n }\n\n\n .fade-enter-from,\n .fade-leave-to {\n opacity: 0;\n }\n </style>","filename":"App.vue"}
Trop classeOn peut aussi personnaliser le type de transition selon la route. Et pour cela, rien de tel que les meta fields pour dire quelle transition on veut ;). Regarde la route home :
{"language":"text/javascript","content":"import { createRouter, createWebHistory } from 'vue-router'\nconst Home = () => import('../views/Home')\nconst Legals = () => import('../views/Legals')\nconst Connexion = () => import('../views/Connexion')\nconst News = () => import('../views/News')\nconst NewsAll = () => import('../views/NewsAll')\nconst NewsShow = () => import('../views/NewsShow')\nconst NewsModeration = () => import('../views/NewsModeration')\n\nconst routes = [\n {\n path: '/',\n name: 'Home',\n component: Home,\n meta:{\n transition: 'bounce'\n }\n },\n {\n path: '/mentions-legales',\n name: 'Legals',\n component: Legals,\n },\n {\n path: '/connexion',\n name: 'Connexion',\n component: Connexion\n },\n {\n path: '/news',\n name: 'News',\n component: News,\n children: [\n {\n path: '',\n name: 'News.All',\n component: NewsAll,\n },\n {\n path: ':id(\\\\d+)',\n props:true,\n name: 'News.Show',\n component: NewsShow\n }\n ]\n },\n {\n path: '/news/moderate',\n name: 'Moderation',\n component: NewsModeration,\n meta:{\n requiresAuth:true\n }\n }\n]\n\nconst router = createRouter({\n history: createWebHistory(process.env.BASE_URL),\n routes\n})\n\nrouter.beforeEach((to, from, next)=>{\n if(to.meta.requiresAuth && !localStorage.getItem('auth')) {\n next({name:'Connexion'})\n } else {\n next()\n }\n})\n\nexport default router\n","filename":"index.js"}
Et ensuite, sur App.vue :
{"language":"text/html","content":"<template>\n <div id=\"nav\">\n <router-link :to=\"{name:'Home'}\" custom v-slot=\"{ navigate, href, isActive }\">\n <a :href=\"href\" @click=\"navigate\" :class=\"isActive ? 'router-link-active router-link-exact-active' : ''\"><span\n class=\"material-icons\">home</span>Home</a>\n </router-link> |\n <router-link :to=\"{name:'News.All'}\">Consulter les actualités</router-link> |\n <router-link :to=\"{name:'Legals'}\">Mentions légales</router-link> |\n <router-link :to=\"{name:'Connexion'}\">Connexion</router-link>\n </div>\n <router-view v-slot=\"{ Component, route }\">\n\t <!-- On utilise soit la transition dans le meta field, et s'il n'y en a pas, on utilise fade -->\n <transition :name=\"route.meta.transition || 'fade'\">\n <component :is=\"Component\" />\n </transition>\n </router-view>\n</template>\n","filename":"App.vue"}
Super top ! Comme tu dis ;). Facile vue-router !
J'ai terminé cette partie