Dommage... Ce serait bien de mettre une petite page d'erreur ! Par contre, (et ça c'est vraiment dommage), on n'aura pas de statut 404 quand même. Il est impossible de changer le statut avec vue-router. C'est normal, on est côté front ! C'est le serveur qui gère les erreurs HTTP, pas du JS ;).
Je comprends...
Du coup, ce que l'on peut faire, c'est simplement rajouter une route dans notre router qui... capte tout. Si on arrive dans cette route, c'est qu'on ne sera pas passé dans une autre, donc qu'on a mis une URL fausse.
Pour ça, Vue.JS dans sa documentation nous offre la solution : utiliser pathMatch et les regex, comme suit : path: '/:pathMatch(.*)*'
Voici donc, tout simplement, notre nouvelle liste de routes :
{"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')\nconst NotFound = () => import('../views/NotFound')\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 { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },\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"}
J'ai terminé cette partie