vue3 自定义404界面

设置路径

在我们的router下的index.js中添加如下路径即可

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

---

自定义404界面

在我们的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就完成啦