使用 vue3 的写一个好看的404页面

好的，以下是一个使用 Vue 3 编写的简单但好看的 404 页面示例：

首先，我们需要创建一个新的 Vue 3 项目。你可以使用 Vue CLI 或手动创建一个 HTML 文件并在其中引入 Vue 和 Vue Router。

然后，在 `App.vue` 中，我们可以编写 404 页面的代码。

<template>
  <div class="container">
    <h1>404</h1>
    <p>Oops! The page you requested was not found.</p>
    <router-link to="/">Go back to home page</router-link>
  </div>
</template>

<style>
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

h1 {
  font-size: 10rem;
  font-weight: bold;
  color: #2d3142;
  margin-bottom: 1rem;
}

p {
  font-size: 2rem;
  color: #4f5d75;
  margin-bottom: 3rem;
}

router-link {
  color: #fff;
  background-color: #ef8354;
  padding: 1rem 2rem;
  border-radius: 2rem;
  text-decoration: none;
  font-size: 1.5rem;
  transition: all 0.2s ease-in-out;
}

router-link:hover {
  transform: translateY(-0.2rem);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
}
</style>

这里我们创建了一个包含一些文本和一个路由链接的容器，它们都被居中并垂直居中。我们使用了一些 CSS 属性来美化页面。

在 `main.js` 中，我们需要导入 Vue Router 并设置路由：

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'

const routes = [
  { path: '/404', component: App },
  { path: '/:pathMatch(.*)*', redirect: '/404' }
]

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

createApp(App).use(router).mount('#app')

这里我们创建了一个路由并将其指向我们的 404 页面组件。我们还设置了一个重定向，以确保任何无法匹配的 URL 都会重定向到 404 页面。

最后，我们需要在 HTML 文件中添加一个占位符，以便 Vue 可以将其渲染到页面上：

<div id="app"></div>

现在，当用户访问一个不存在的页面时，他们将看到一个漂亮的 404 页面。

希望这可以帮助你！