404 / Not Found
通过动态视觉呈现缺失目标，并提供返回有效内容的路径。
适用场景
- 当界面需要以下行为时使用 404 / Not Found：通过动态视觉呈现缺失目标，并提供返回有效内容的路径。
安装
选择安装方式，用法示例将同步更新导入路径。
$ bunx --bun shadcn-vue@2.8.2 add https://orvui.efu.me/r/not-found.json https://orvui.efu.me/r/not-found-glitch.json https://orvui.efu.me/r/not-found-magnetic.json https://orvui.efu.me/r/not-found-spotlight.json https://orvui.efu.me/r/not-found-stacked.json https://orvui.efu.me/r/not-found-terminal.json
首次使用时，将安装的 src/components/orvui/styles.css 导入项目样式入口。
示例
故障
glitch.vue让不稳定的字符显示解析为页面缺失状态码。
404
Page not found
The page you are looking for moved, vanished, or never existed.
packages/vue/src/blocks/not-found/examples/glitch.vue
<script setup lang="ts">
import { NotFoundGlitch } from "@/components/orvui/blocks/not-found";
const navigation = { homeHref: "/", browseHref: "/components/motion" };
</script>
<template>
<div class="w-full"><NotFoundGlitch v-bind="navigation" /></div>
</template>
packages/vue/src/blocks/not-found/src/NotFoundGlitch.vue
磁吸
magnetic.vue让各状态数字跟随附近的指针移动，再回到原位。
Page not found
The page you are looking for moved, vanished, or never existed.
packages/vue/src/blocks/not-found/examples/magnetic.vue
<script setup lang="ts">
import { NotFoundMagnetic } from "@/components/orvui/blocks/not-found";
const navigation = { homeHref: "/", browseHref: "/components/motion" };
</script>
<template>
<div class="w-full"><NotFoundMagnetic v-bind="navigation" /></div>
</template>
packages/vue/src/blocks/not-found/src/NotFoundMagnetic.vue
聚光
spotlight.vue在深色表面上，用跟随指针的光照显示状态码。
Page not found
The page you are looking for moved, vanished, or never existed.
packages/vue/src/blocks/not-found/examples/spotlight.vue
<script setup lang="ts">
import { NotFoundSpotlight } from "@/components/orvui/blocks/not-found";
const navigation = { homeHref: "/", browseHref: "/components/motion" };
</script>
<template>
<div class="w-full"><NotFoundSpotlight v-bind="navigation" /></div>
</template>
packages/vue/src/blocks/not-found/src/NotFoundSpotlight.vue
堆叠
stacked.vue悬停或聚焦时，让状态面板下方的卡片扇形展开。
404
out of the deckPage not found
The page you are looking for moved, vanished, or never existed.
packages/vue/src/blocks/not-found/examples/stacked.vue
<script setup lang="ts">
import { NotFoundStacked } from "@/components/orvui/blocks/not-found";
const navigation = { homeHref: "/", browseHref: "/components/motion" };
</script>
<template>
<div class="w-full"><NotFoundStacked v-bind="navigation" /></div>
</template>
packages/vue/src/blocks/not-found/src/NotFoundStacked.vue
终端
terminal.vue在终端式表面内逐字输入失败的导航命令与状态码。
~/orvui
$ cd /page
cd: no such file or directory: /page
$ status 404
Page not found
The page you are looking for moved, vanished, or never existed.
packages/vue/src/blocks/not-found/examples/terminal.vue
<script setup lang="ts">
import { NotFoundTerminal } from "@/components/orvui/blocks/not-found";
const navigation = { homeHref: "/", browseHref: "/components/motion" };
</script>
<template>
<div class="w-full"><NotFoundTerminal v-bind="navigation" /></div>
</template>
packages/vue/src/blocks/not-found/src/NotFoundTerminal.vue
状态与事件
此示例组合没有声明成对的受控属性与 update 事件。使用已列出的属性、原生事件和插槽组合内容；不要为它添加未公开的 v-model。
API 参考
故障
NotFoundGlitch
code?string—title?string—description?string—homeHref?string—homeLabel?string—browseHref?string—browseLabel?string—NotFoundStage
插槽
default() => unknown#defaultNotFoundActions
browseLabel?stringNOT_FOUND_DEFAULTS.browseLabelhomeHref?stringNOT_FOUND_DEFAULTS.homeHrefhomeLabel?stringNOT_FOUND_DEFAULTS.homeLabelbrowseHref?stringNOT_FOUND_DEFAULTS.browseHref磁吸
NotFoundMagnetic
code?string—title?string—description?string—homeHref?string—homeLabel?string—browseHref?string—browseLabel?string—NotFoundStage
插槽
default() => unknown#defaultNotFoundActions
browseLabel?stringNOT_FOUND_DEFAULTS.browseLabelhomeHref?stringNOT_FOUND_DEFAULTS.homeHrefhomeLabel?stringNOT_FOUND_DEFAULTS.homeLabelbrowseHref?stringNOT_FOUND_DEFAULTS.browseHref聚光
NotFoundSpotlight
code?string—title?string—description?string—homeHref?string—homeLabel?string—browseHref?string—browseLabel?string—NotFoundStage
插槽
default() => unknown#defaultNotFoundActions
browseLabel?stringNOT_FOUND_DEFAULTS.browseLabelhomeHref?stringNOT_FOUND_DEFAULTS.homeHrefhomeLabel?stringNOT_FOUND_DEFAULTS.homeLabelbrowseHref?stringNOT_FOUND_DEFAULTS.browseHref堆叠
NotFoundStacked
code?string—title?string—description?string—homeHref?string—homeLabel?string—browseHref?string—browseLabel?string—NotFoundStage
插槽
default() => unknown#defaultNotFoundActions
browseLabel?stringNOT_FOUND_DEFAULTS.browseLabelhomeHref?stringNOT_FOUND_DEFAULTS.homeHrefhomeLabel?stringNOT_FOUND_DEFAULTS.homeLabelbrowseHref?stringNOT_FOUND_DEFAULTS.browseHref终端
NotFoundTerminal
code?string—title?string—description?string—homeHref?string—homeLabel?string—browseHref?string—browseLabel?string—NotFoundStage
插槽
default() => unknown#defaultNotFoundActions
browseLabel?stringNOT_FOUND_DEFAULTS.browseLabelhomeHref?stringNOT_FOUND_DEFAULTS.homeHrefhomeLabel?stringNOT_FOUND_DEFAULTS.homeLabelbrowseHref?stringNOT_FOUND_DEFAULTS.browseHref无障碍
为交互控件提供明确的无障碍名称。保留文档中的键盘路径、可见焦点与减少动态效果状态；自定义插槽应继续保留所替代部件的语义。
常见问题
- 如何配置 404 / Not Found？
- 通过 code、title、description、homeHref、homeLabel、browseHref、browseLabel 配置 404 / Not Found；API 表列出其类型与默认值。
- 如何连接到应用状态？
- 通过文档中的组合方式提供内容，应用副作用由调用方管理。
- 可以在服务端渲染吗？
- 可以在 Vue SSR 应用中正常渲染。服务端与客户端的初始 props 应保持一致；浏览器测量与交互资源在挂载后启动。
请留意
部分组件参考了开源作品，相关署名与独立许可请参阅 NOTICE。
更新于
来源与许可 ↗MIT · 0.1.1