vue写好的404页面

代码

view/404.vue

<template>
  <div class="blankPage">
    <div class="minPage">
      <div>
        <img src="@/assets/image/result/blankPage.png" alt="" />
        <ul>
          <li style="margin-bottom: 10px; font-size: 16px; color: #262626">
            啊哦~你想找的内容离你而去了哦
          </li>
          <li style="margin-bottom: 10px; font-size: 16px">
            内容不存在，可能为入下原因导致：
          </li>
          <li><span>①</span> 内容还在审核中</li>
          <li><span>②</span> 内容以前存在，但是由于不符合新的规定而被删除</li>
          <li><span>③</span> 内容地址错误</li>
          <li><span>④</span> 作者删除了内容</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineComponent } from "vue";
name: "";
</script>

<style lang="less" scoped>
.blankPage {
  margin: 20px 0 0px;
  .minPage {
    margin: auto;
    min-height: 650px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  ul {
    margin: 10px 0 0 35px;
    padding: 0;
    list-style: none;
    li {
      margin: 8px;
      font-size: 14px;
      color: gray;
      span {
        font-size: 14px;
      }
    }
  }
}
</style>

router/index.ts

  {
      path: '/404',
      component: () => import("@/views/404.vue"),
    },
    {
      path:"/:pathMatch(.*)",
      redirect:'/404'
  }