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) => { 
   }) 

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/10685.html