vue中，404页面——当前页面不存在，直接跳转首页

vue中，404页面——当前页面不存在，直接跳转首页

效果

代码

1、页面

src\components\errorPage\404page.vue

<template>
  <div style="height:100%;">
    <div class="wscn-http404">
      <div class="pic-404">
        <img class="pic-404__parent" :src="img_404" alt="404">
        <img class="pic-404__child left" :src="img_404_cloud" alt="404">
        <img class="pic-404__child mid" :src="img_404_cloud" alt="404">
        <img class="pic-404__child right" :src="img_404_cloud" alt="404">
      </div>
      <div class="bullshit">
        <div class="bullshit__oops">OOPS!</div>
        <!--    <div class="bullshit__info">版权所有
              <a class='link-type' href='https://wallstreetcn.com' target='_blank'>华尔街见闻</a>
            </div>
            <div class="bullshit__headline">{{ message }}</div>-->
        <div class="bullshit__info">当前页面不存在，<span class="bullshit__return-second">{{second}}</span> &nbsp;秒后直接跳转首页</div>
        <!-- <a href="/" class="bullshit__return-home">返回首页</a>-->
        <el-button @click="back" icon='arrow-left' class="bullshit__return-home">直接跳转首页</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import img_404 from '@/assets/404_images/404.png'
  import img_404_cloud from '@/assets/404_images/404_cloud.png'

  export default {
    name: 'page404',
    data() {
      return {
        img_404,
        img_404_cloud,
        second : 5,
        interval : ""
      }
    },
    methods:{
      back() {
        this.$router.push({ path: '/homePage' })
      }
    },
    created(){
      this.interval = setInterval(() => {
        this.second --;
        if(this.second === 0){
          // this.back();
        }
      }, 1000);
    },
    destroyed(){
      clearInterval(this.interval);
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .wscn-http404 {
    position: relative;
    width: 1200px;
    margin: 20px auto 60px;
    padding: 0 100px;
    overflow: hidden;
    .pic-404 {
      position: relative;
      float: left;
      width: 600px;
      padding: 150px 0;
      overflow: hidden;
      &__parent {
        width: 100%;
      }
      &__child {
        position: absolute;
        &.left {
          width: 80px;
          top: 17px;
          left: 220px;
          opacity: 0;
          animation-name: cloudLeft;
          animation-duration: 2s;
          animation-timing-function: linear;
          animation-fill-mode: forwards;
          animation-delay: 1s;
        }
        &.mid {
          width: 46px;
          top: 10px;
          left: 420px;
          opacity: 0;
          animation-name: cloudMid;
          animation-duration: 2s;
          animation-timing-function: linear;
          animation-fill-mode: forwards;
          animation-delay: 1.2s;
        }
        &.right {
          width: 62px;
          top: 100px;
          left: 500px;
          opacity: 0;
          animation-name: cloudRight;
          animation-duration: 2s;
          animation-timing-function: linear;
          animation-fill-mode: forwards;
          animation-delay: 1s;
        }
        @keyframes cloudLeft {
          0% {
            top: 17px;
            left: 220px;
            opacity: 0;
          }
          20% {
            top: 33px;
            left: 188px;
            opacity: 1;
          }
          80% {
            top: 81px;
            left: 92px;
            opacity: 1;
          }
          100% {
            top: 97px;
            left: 60px;
            opacity: 0;
          }
        }
        @keyframes cloudMid {
          0% {
            top: 10px;
            left: 420px;
            opacity: 0;
          }
          20% {
            top: 40px;
            left: 360px;
            opacity: 1;
          }
          70% {
            top: 130px;
            left: 180px;
            opacity: 1;
          }
          100% {
            top: 160px;
            left: 120px;
            opacity: 0;
          }
        }
        @keyframes cloudRight {
          0% {
            top: 100px;
            left: 500px;
            opacity: 0;
          }
          20% {
            top: 120px;
            left: 460px;
            opacity: 1;
          }
          80% {
            top: 180px;
            left: 340px;
            opacity: 1;
          }
          100% {
            top: 200px;
            left: 300px;
            opacity: 0;
          }
        }
      }
    }
    .bullshit {
      position: relative;
      float: left;
      width: 330px;
      padding: 180px 0;
      overflow: hidden;
      &__oops {
        font-size: 32px;
        font-weight: bold;
        line-height: 40px;
        color: #1482f0;
        opacity: 0;
        margin-bottom: 20px;
        animation-name: slideUp;
        animation-duration: 0.5s;
        animation-fill-mode: forwards;
      }
      &__headline {
        font-size: 20px;
        line-height: 24px;
        color: #1482f0;
        opacity: 0;
        margin-bottom: 10px;
        animation-name: slideUp;
        animation-duration: 0.5s;
        animation-delay: 0.1s;
        animation-fill-mode: forwards;
      }
      &__info {
        font-size: 13px;
        line-height: 21px;
        color: grey;
        opacity: 0;
        margin-bottom: 30px;
        animation-name: slideUp;
        animation-duration: 0.5s;
        animation-delay: 0.2s;
        animation-fill-mode: forwards;
      }
      &__return-second{
        color:red;
      }
      &__return-home {
        display: block;
        float: left;
        width: 130px;
        height: 36px;
        background: #1482f0;
        border-radius: 100px;
        text-align: center;
        color: #ffffff;
        opacity: 0;
        font-size: 14px;
        /* line-height: 36px;*/
        cursor: pointer;
        animation-name: slideUp;
        animation-duration: 0.5s;
        animation-delay: 0.3s;
        animation-fill-mode: forwards;
      }
      @keyframes slideUp {
        0% {
          transform: translateY(60px);
          opacity: 0;
        }
        100% {
          transform: translateY(0);
          opacity: 1;
        }
      }
    }
  }
</style>

2、路由

src\router\index.ts

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';

type NewRouteRecordRaw = RouteRecordRaw & {
  redirect?: string
}

const routes: Array<RouteRecordRaw> = [
  // 404页面
  {
    path: '/errorPage',
    name: 'ErrorPage',
    component: () => import('@/components/errorPage/404page.vue'),
  },
  // 401页面
  {
    path: '/401',
    name: '401',
    component: () => import('@/components/errorPage/401page.vue'),
  },
    //如需点击返回首页的路由跳转homePage
  {
    path: '/',
    name: 'home',
    redirect: '/homePage',
  },
  // 首页
  {
    path: '/homePage',
    name: 'homePage',
    component: () => import('@/views/homePage.vue')
  },
]

const router = createRouter({
  history: createWebHashHistory(),
  routes,
  scrollBehavior(to, from, savedPosition) {
    return { left: 0, top: 0 }
  }
})

export default router

src\main.ts

import router from './router'
app.use(router)

router.beforeEach((to, from, next) => {})