<template> <div class="error-page"> <div class="error-code">4<span>0</span>3</div> <div class="error-desc">啊哦~ 你没有权限访问该页面哦</div> <div class="error-handle"> <router-link to="/"> <el-button type="primary" size="large">返回首页</el-button> </router-link> <el-button class="error-btn" type="primary" size="large" @click="goBack">返回上一页</el-button> </div> </div> </template> <script> import { useRouter } from 'vue-router'; export default { name: '404', setup() { const router = useRouter(); const goBack = () => { router.go(-1); }; return { goBack, }; }, }; </script> <style scoped> .error-page { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; height: 100%; background: #f3f3f3; box-sizing: border-box; } .error-code { line-height: 1; font-size: 250px; font-weight: bolder; color: #f02d2d; } .error-code span { color: #00a854; } .error-desc { font-size: 30px; color: #777; } .error-handle { margin-top: 30px; padding-bottom: 200px; } .error-btn { margin-left: 100px; } </style>

这段代码实现了一个404页面的显示。如果用户访问了不存在的页面，就会显示这个页面。页面中包含一个错误码、错误描述和两个按钮。第一个按钮可以返回网站首页，第二个按钮可以返回上一页。代码中使用了Vue 3中的Composition API，通过useRouter()方法获取了Vue Router实例，然后在goBack()方法中调用了router.go(-1)方法返回上一页。同时，使用了CSS样式来美化页面。