CODEWITHSUNDEEP
javascriptvuejs3
Joan
Joan

Reputation: 43

How to build page not found in vue 3

I'm doing a project with vue 3 and I have a problem with generate a pageNOTfound. So, I'm going to show my code cause I can't see the problem.

Route.js:

import { 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(.*)*",
    component: NotFound,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

main.js

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router"; // <---
// estilos app
import "./styles/styles.scss";

createApp(App).use(router).mount("#app");

NotFound.vue

<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>

App.vue

<template>
  <div id="app">
    <app-header />
    <div class="app-container">
      <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>

I can't see where is my problem cause pageNOTfound is not working at this time. I tried a lot of changes but I don't know how can it works.

Upvotes: 1

Views: 1141

Answers (1)

Nechoj
Nechoj

Reputation: 1582

If you want to have 404 as a completely seperate page, without footer and header, then you need these files:

App.vue

<template>
  <router-view></router-view>
</template>

<script>
export default {
  name: "App",
};
</script>

Home.vue

<template>
  <div>
    <app-header />
    <div class="app-container">
      ... other home content here ...
    </div>
    <Footer />
  </div>
</template>

<script>
import AppHeader from "@/components/AppHeader.vue";
import Footer from "@/components/Footer.vue";

export default {
  name: "Home",
  components: {
    AppHeader,
    Footer,
  },
};
</script>

This way the App.vue does not contain header or footer, but the Home.vue. And the 404 page will be displayed without header and footer.

Upvotes: 1

Related Questions