Tengo la siguiente estructura del código:
enrutador.js:
import { createRouter, createWebHistory } from 'vue-router'; const router = createRouter({ history: createWebHistory(), routes: [ { path: '/', name: 'App', component: () => import('../../src/App.vue'), }, { path: '/:pathMatch(.*)', name: 'ErrorView', component: () => import('../components/Error.vue'), } ], }); export default router;aplicación.vue
<template> <Land /> <LeftNavbar /> <Navbar /> <Experience /> <TechnologiesCarousel /> <Projects /> <Copyright /> <BackToTop /> </template>Cuando presiono en la barra de URL: http://localhost:3000. La aplicación se procesa correctamente, lo cual está bien, pero cuando intento escribir una URL incorrecta, por ejemplo: http://localhost:3000/abcf/ || http://localhost:3000/dsafbdmhgfjweghjfw para ser redirigido a la página 404, no estoy redirigido, la página aún muestra el componente App.vue.
¿Alguien tiene alguna idea de por qué no se representa la página 404?
Intente seguir /:pathMatch(.*)* :
{ path: "/:pathMatch(.*)*", name: 'ErrorView', component: () => import('../components/Error.vue'), }, y en App.vue coloque <router-view /> y mueva los componentes a otra vista.
Supongo que estás usando Vue 3 .
En el archivo de su enrutador, debe cambiar la ruta a esto:
{ path: '/:pathMatch(.*)*', name: 'ErrorView', component: () => import('../components/Error.vue'), } Para Vue 2 , la ruta puede ser: path:'*'
De la migración de Vue 2 -> 3, más información para aquellos que quieren saber qué ha cambiado:
Esencialmente, debería poder reemplazar la ruta ' ' con '/:pathMatch(. )*' y estar listo para comenzar.
Motivo: Vue Router ya no usa la ruta a la expresión regular, sino que implementa su propio sistema de análisis que permite la clasificación de rutas y el enrutamiento dinámico. Dado que generalmente agregamos una sola ruta general por proyecto, no hay gran beneficio en admitir una sintaxis especial para archivos *.