DengQN·一个普通程序员;
Nuxt3实现空白页
2024-01-07 16:35 125
#nuxt3#捣鼓

效果

image.png

在pages目录添加一个叫 [...slug].vue 的页面

<template>
  <div class="min-w-full min-h-screen flex flex-col justify-center items-center">
    <n-empty description="404">
      <template #extra>
        <NuxtLink to="/">
          <n-button size="small">
            看看别的
            <n-countdown :duration="10000" @finish="toIndex" :render="(p) => `(${p.seconds}秒后回到首页)`"/>
          </n-button>
        </NuxtLink>
      </template>
    </n-empty>
  </div>
</template>


<script setup lang="ts">
import {NEmpty, NButton, NCountdown} from 'naive-ui'

function toIndex() {
  navigateTo('/')
}

</script>

<style scoped>

</style>