vue3 + ts + element-plus 生成一个404页面

<think>我们使用Vue3、TypeScript和Element Plus创建一个404页面。步骤如下： 1. 创建404组件：在`src/views`目录下创建`NotFound.vue`文件 2. 配置路由：在路由配置中将404页面设置为通配符路由 3. 使用Element Plus组件设计404页面 ### 步骤1：创建404组件 在`src/views`目录下创建`NotFound.vue`文件： ```vue <template> <div class="not-found-container"> <el-empty description="页面不存在" :image-size="400"> <template #image> <!-- 可以使用Element Plus自带的图片，也可以自定义 --> <img src="@/assets/404.png" alt="404" v-if="false" /> <!-- 这里只是示例，实际使用时可以替换 --> <div class="custom-image"> <svg-icon icon-class="404" class="custom-icon" /> <!-- 如果使用svg图标 --> </div> </template> <el-button type="primary" @click="goHome">返回首页</el-button> </el-empty> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; import { useRouter } from 'vue-router'; export default defineComponent({ name: 'NotFound', setup() { const router = useRouter(); const goHome = () => { router.push('/'); }; return { goHome }; } }); </script> <style scoped> .not-found-container { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f5f7fa; } .custom-image { font-size: 120px; color: #909399; } </style> ``` ### 步骤2：配置路由 修改路由配置文件（通常位于`src/router/index.ts`）： ```typescript import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'; import Home from '../views/Home.vue'; const routes: Array<RouteRecordRaw> = [ { path: '/', name: 'Home', component: Home }, // ...其他路由 { path: '/:pathMatch(.*)*', // 匹配所有未匹配的路由 name: 'NotFound', component: () => import('../views/NotFound.vue') } ]; const router = createRouter({ history: createWebHistory(), routes }); export default router; ``` ### 步骤3：设计404页面（使用Element Plus） 在上面的`NotFound.vue`中，我们使用了Element Plus的`el-empty`组件来展示404页面。你也可以自定义内容，比如： ```vue <template> <div class="not-found"> <div class="not-found-content"> <h1 class="error-code">404</h1> <p class="error-message">页面不存在</p> <el-button type="primary" @click="goHome">返回首页</el-button> </div> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; import { useRouter } from 'vue-router'; export default defineComponent({ setup() { const router = useRouter(); const goHome = () => { router.push('/'); }; return { goHome }; } }); </script> <style scoped> .not-found { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f5f7fa; } .not-found-content { text-align: center; } .error-code { font-size: 120px; margin: 0; color: #409eff; } .error-message { font-size: 24px; margin: 20px 0; } </style> ``` ### 使用SVG图标（可选） 如果你想要使用SVG图标，可以安装`svg-sprite-loader`，然后创建一个`SvgIcon`组件。这里不再展开，但你可以参考以下步骤： 1. 安装依赖：`npm install svg-sprite-loader -D` 2. 创建`src/icons`目录，将svg文件放入其中 3. 创建`src/components/SvgIcon.vue`组件 4. 在`main.ts`中全局注册`SvgIcon`组件 5. 在`vue.config.js`中配置`svg-sprite-loader` ### 注意事项 - 确保路由配置中404路由放在最后，因为路由匹配是从上到下的 - 使用`<img>`标签时，注意图片路径（建议使用`@/assets`） ### 完整示例代码 404页面组件（使用自定义布局）: ```vue <template> <div class="not-found"> <div class="content"> <h1>404</h1> <p>抱歉，您访问的页面不存在</p> <el-button type="primary" @click="goHome">返回首页</el-button> </div> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; import { useRouter } from 'vue-router'; export default defineComponent({ name: 'NotFound', setup() { const router = useRouter(); const goHome = () => { router.push('/'); }; return { goHome }; } }); </script> <style scoped> .not-found { display: flex; justify-content: center; align-items: center; height: 100vh; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); } .content { text-align: center; } h1 { font-size: 150px; margin: 0; color: #409eff; line-height: 1; } p { font-size: 24px; color: #606266; margin: 20px 0; } </style> ``` 路由配置（`src/router/index.ts`）: ```typescript import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'; const routes: Array<RouteRecordRaw> = [ // ... 其他路由 // 404路由必须放在最后 { path: '/:pathMatch(.*)*', name: 'NotFound', component: () => import('@/views/NotFound.vue') } ]; const router = createRouter({ history: createWebHistory(), routes }); export default router; ``` 这样，当用户访问不存在的路径时，就会显示404页面，并有一个按钮可以返回首页[^1][^2][^3]。 §§相关问题§§ 1. Vue3中如何配置路由守卫？ 2. Element Plus的Empty组件有哪些属性可以自定义？ 3. 在Vue3项目中如何全局注册组件？ 4. 如何优化Vue3项目的路由懒加载？</think>在 Vue3 项目中结合 TypeScript 和 Element Plus 创建 404 页面，可以按照以下步骤实现： ### 一、创建 404 页面组件 1. 在 `src/views` 目录下创建 `NotFound.vue` 文件： ```vue <template> <div class="not-found-container"> <el-empty :image-size="400" description="页面不存在"> <template #image> <div class="error-code">404</div> </template> <p class="error-message">抱歉，您访问的页面不存在</p> <el-button type="primary" @click="goHome">返回首页</el-button> </el-empty> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; import { useRouter } from 'vue-router'; export default defineComponent({ name: 'NotFound', setup() { const router = useRouter(); const goHome = () => { router.push('/'); }; return { goHome }; } }); </script> <style scoped> .not-found-container { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f5f7fa; } .error-code { font-size: 120px; font-weight: bold; color: #409eff; line-height: 1; } .error-message { margin: 20px 0; font-size: 18px; color: #606266; } </style> ``` ### 二、配置路由 1. 在 `src/router/index.ts` 中配置路由： ```typescript import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'; import Home from '../views/Home.vue'; import NotFound from '../views/NotFound.vue'; // 导入404组件 const routes: Array<RouteRecordRaw> = [ { path: '/', name: 'Home', component: Home }, // ...其他路由配置 { // 匹配所有未定义的路由 path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound } ]; const router = createRouter({ history: createWebHistory(), routes }); export default router; ``` ### 三、添加 Element Plus 支持（如果尚未安装） 1. 安装 Element Plus： ```bash npm install element-plus @element-plus/icons-vue ``` 2. 在 `src/main.ts` 中引入： ```typescript import { createApp } from 'vue'; import ElementPlus from 'element-plus'; import 'element-plus/dist/index.css'; import App from './App.vue'; import router from './router'; const app = createApp(App); app.use(ElementPlus); app.use(router); app.mount('#app'); ``` ### 四、使用说明 1. **页面效果**： - 显示大号 "404" 错误代码 - 使用 Element Plus 的 `el-empty` 组件展示空状态 - 包含返回首页按钮 - 自适应布局，居中显示 2. **路由匹配规则**： ```typescript path: '/:pathMatch(.*)*' // 匹配所有未定义的路由 ``` 3. **自定义选项**： - 修改 `error-code` 样式可调整 404 数字的样式 - 修改 `error-message` 可更改提示文本 - 在 `el-empty` 组件中添加自定义图标： ```vue <template #image> <el-icon :size="100"><Warning /></el-icon> <div class="error-code">404</div> </template> ``` ### 五、完整项目结构示例 ``` src/ ├── views/ │ ├── Home.vue │ ├── About.vue │ └── NotFound.vue # 404页面组件 ├── router/ │ └── index.ts # 路由配置 ├── App.vue └── main.ts # 主入口文件 ``` ### 六、测试验证 1. 启动开发服务器： ```bash npm run dev ``` 2. 访问不存在的路由，如 `http://localhost:3000/non-existent-page`，将显示 404 页面[^1][^2][^3]。