如何构建在 vue 3 中找不到的页面

Question

我正在用 vue 3 做一个项目，但我在生成 pageNOTfound 时遇到了问题。所以，我要展示我的代码，因为我看不到问题所在。

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>

我看不出我的问题出在哪里，因为此时 pageNOTfound 不工作。我尝试了很多改变，但我不知道它是如何工作的。

Answer 1

如果你想将 404 作为一个完全独立的页面，没有页脚和页眉，那么你需要这些文件：

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>

这样 App.vue 不包含页眉或页脚，但 Home.vue。并且404页面将显示没有页眉和页脚。

如何构建在 vue 3 中找不到的页面

How to build page not found in vue 3

javascript

vuejs3

App.vue

Home.vue