当前位置：首页 > VUE

vue缺省页实现

2026-03-07 23:27:14VUE

Vue 缺省页实现方法

使用条件渲染控制显示

通过 v-if 或 v-show 指令控制缺省页的显示时机，当数据为空或加载失败时展示缺省页。

<template>
  <div>
    <div v-if="dataList.length > 0">
      <!-- 正常内容 -->
    </div>
    <div v-else class="empty-page">
      <img src="@/assets/empty.png" alt="暂无数据">
      <p>暂无数据</p>
    </div>
  </div>
</template>

封装可复用组件

将缺省页封装为独立组件，通过 props 控制不同状态的显示。

vue缺省页实现

<!-- EmptyState.vue -->
<template>
  <div class="empty-state">
    <img :src="image" :alt="title">
    <h3>{{ title }}</h3>
    <p>{{ description }}</p>
    <button v-if="showButton" @click="$emit('action')">{{ buttonText }}</button>
  </div>
</template>

<script>
export default {
  props: {
    image: String,
    title: String,
    description: String,
    showButton: Boolean,
    buttonText: String
  }
}
</script>

结合路由实现全屏缺省页

在路由层面处理缺省页，适用于无权限或404等情况。

// router.js
{
  path: '/empty',
  component: () => import('@/views/EmptyStateView.vue'),
  meta: { requiresAuth: false }
}

使用第三方UI库

Element UI、Ant Design Vue 等库提供现成的空状态组件。

vue缺省页实现

<template>
  <a-empty description="暂无数据" />
</template>

<script>
import { Empty } from 'ant-design-vue';
export default {
  components: { 'a-empty': Empty }
}
</script>

动态缺省内容

根据不同类型动态显示缺省内容，增强用户体验。

computed: {
  emptyConfig() {
    if (this.error) {
      return {
        image: require('@/assets/error.png'),
        title: '加载失败',
        buttonText: '重试'
      }
    }
    return {
      image: require('@/assets/empty.png'),
      title: '暂无数据',
      buttonText: '刷新'
    }
  }
}

动画效果增强

为缺省页添加过渡动画，提升视觉体验。

.empty-page {
  transition: all 0.3s ease;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

标签: vue