Skip to content

漂亮的 404

在日常业务中,当用户访问不存在的页面时,应该给到我们的用户一个不存在的信息提示,而这个提示的页面就是 404 页。

你可以随便访问一个不存在的页面,例如 /bucunzai

notFound

当然还有暗黑模式适应。

notFound-dark

也支持简单的响应式适应。例如移动端浏览器上会有正确的显示。

当然如果这个 404 的封面不符合你的口味,那么可以在 pages/[...notFound].vue 中修改 img 标签的 src。默认是 32.svg,支持 1 ~ 33svg

例如,默认 👇

html
<!-- 省略各种代码 -->
<template>
	<img src="/notFound/32.svg" class="cover" alt="page not found" />
</template>

修改 /notFound/32.svg/notFound/33.svg

html
<!-- 省略各种代码 -->
<template>
	<img src="/notFound/33.svg" class="cover" alt="page not found" />
</template>

即可切换封面为 👇

notFound-other