Buenas!
Estoy realizando un proyecto en vue3 y quiero crear la tipica página de error 404 cuando se intenta acceder a una url que no existe. A continuació muestro mi codigo:
route.js
spoilerimport { createRouter, createWebHistory } from "vue-router";
import Home from "@/views/Home.vue";
import NotFound from "@/views/NotFound.vue";
const routes = [
{
path: "/",
name: "Home",
component: Home,
},
{
path: "/:pathMatch(.*)*",
name: "NotFound",
component: NotFound,
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
main.js
spoilerimport { createApp } from "vue";
import App from "./App.vue";
import router from "./router"; // <---
// estilos app
import "./styles/styles.scss";
createApp(App).use(router).mount("#app");
App.vue
spoiler<template>
<div id="app">
<app-header />
<div class="app-container">
<router-view></router-view>
<Home />
</div>
<Footer />
</div>
</template>
<script>
import AppHeader from "@/components/AppHeader.vue";
import Home from "@/views/Home.vue";
import Footer from "@/components/Footer.vue";
export default {
name: "App",
components: {
AppHeader,
Home,
Footer,
},
};
</script>
NotFound.vue
spoiler<template>
<h1>404: Lo sentimos, la página que buscas no existe</h1>
</template>
<script>
export default {
name: "NotFound",
};
</script>
<style scoped lang="scss"></style>
index.html
spoiler<body>
<noscript>
<strong
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
properly without JavaScript enabled. Please enable it to
continue.</strong
>
</noscript>
<div id="app"></div>
<script type="module" src="../src/main.js"></script>
<!-- built files will be auto injected -->
</body>
Tengo varios problemas. Cuando ingreso una url que no existe, aparece un banner en la parte superior de la web, tapando el header, con el error 404.
La idea es que salga en una página independiente.
¿Que estoy haciendo mal?