vue缺省页实现
Vue 缺省页实现方法
使用条件渲染控制显示
通过v-if或v-show指令控制缺省页的显示。当数据为空时展示缺省组件，否则显示正常内容。
<template>
<div>
<div v-if="list.length > 0">
<!-- 正常内容 -->
</div>
<EmptyPage v-else />
</div>
</template>封装可复用缺省组件
创建独立的EmptyPage组件，包含缺省图标、提示文字和操作按钮，通过props接收自定义文案。
<template>
<div class="empty-container">
<img src="@/assets/empty.png" alt="空状态">
<p>{{ message || '暂无数据' }}</p>
<button @click="$emit('refresh')">刷新试试</button>
</div>
</template>动态插槽实现灵活内容
使用插槽让父组件可以自定义缺省页内容，增强组件灵活性。
<EmptyPage>
<template #default>
<custom-empty-content />
</template>
<template #action>
<custom-button />
</template>
</EmptyPage>全局注册缺省状态组件
在Vue的全局组件中注册缺省组件，方便在任何地方快速调用。
// main.js
import EmptyState from '@/components/EmptyState'
Vue.component('EmptyState', EmptyState)结合路由实现全屏缺省
对于整页无内容的场景，可以通过路由守卫判断数据状态，跳转专用缺省页。
router.beforeEach((to, from, next) => {
if (noDataCondition) {
next({ name: 'EmptyPage' })
} else {
next()
}
})使用第三方UI库方案
主流UI库如Element UI、Ant Design Vue都提供现成的Empty组件，可直接使用。
<el-empty description="描述文字"></el-empty>
<a-empty description="描述文字" />动画效果增强体验
为缺省页添加淡入或加载动画，提升用户体验。
.empty-container {
animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
