vue状态码404错误

在Vue中，当出现状态码为404的错误时，我们可以通过自定义的404界面来展示给用户。首先，在我们的router的index.js文件中添加一个路径，将404错误对应的组件指向我们自定义的404界面。代码如下：

{ path: '/:catchAll(.*)', name: '404', component: () => import('../views/404.vue') },

接下来，在我们的404.vue文件中，我们可以放置一个我们想要的图片文件，用于展示给用户。代码如下：

<template>
  <div class="not-found">
    <img src="../assets/404.gif" alt="" />
  </div>
</template>

<script>
export default {
  name: '404',
  components: {}
}
</script>

<style scoped>
.not-found {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.not-found img {
  width: 100%;
  height: 100%;
}
</style>

这样，当出现状态码为404的错误时，用户将会看到我们自定义的404界面，其中包含了我们设置的图片。
<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [vue3 自定义404界面](https://blog.csdn.net/qq_56263094/article/details/124567246)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *3* [解决vue axios的封装 请求状态的错误提示问题](https://download.csdn.net/download/weixin_38729221/12951854)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]