Vue - 简约大气 404 页面

向右看齐 2023-01-23 13:49 5阅读 0赞

## 效果图 ##

![在这里插入图片描述][20210715110910517.png]

## 实现代码 ##

复制即可。

<template>
      <div>
        <div class="error">
            
    		<img src="/images/20221004/234b3f83560048fa9679c05c6c8bb4b1.png">
    		<p>抱歉！你访问的页面不存在或已删除 :( </p>
    		<span class="back" @click="go()">返回上页</span>
    	</div>
    
      </div>
    </template>
    
    <script> export default { methods: { go: function(){ this.$router.go(-1) } } } </script>
    
    <style scoped> .error{ position: absolute; top:50%; margin-top:-250px; width:100%; height:400px; /*border:1px solid red;*/ overflow: hidden; } .error img{ display: block; margin:0 auto; } .error p{ text-align: center; font-size: 16px ! important; font-weight: 600 } .back{ display: block; width:100px; text-align: center; margin:20px auto; padding:8px 0; border:1px solid #333; border-radius: 100px; cursor: pointer; color: rgb(27, 27, 27); font-size: 15px; } </style>

![在这里插入图片描述][20210715111039922.png]

[20210715110910517.png]: /images/20221004/d0738f19125c4149acf9e3f6f250d6ed.png
[20210715111039922.png]: /images/20221004/234b3f83560048fa9679c05c6c8bb4b1.png

发表评论取消回复

表情：

评论列表（有 0 条评论，5人围观）

还没有评论，来说两句吧...

相关阅读

相关刷新vue页面不出现404的方法

最近在做vue项目的时候遇到一个问题，就是执行完一个方法后需要刷新页面才能更新页面的数据，但是调用刷新页面的函数后页面报404了，当然这是在测试环境，本地开发环境是没有这个问题

柔情只为你懂/ 2023年10月11日 23:16/ 0 赞/ 23 阅读

相关 Nginx部署Vue项目刷新页面404

vue项目router用的是history模式，用nginx代理服务器部署后只能看到主页，刷新或跳转其他页面就会出现404。解决方法：修改nginx.conf配置文件，将客

柔情只为你懂/ 2023年02月21日 06:45/ 0 赞/ 7 阅读

相关 Vue - 简约大气 404 页面

效果图 ![在这里插入图片描述][20210715110910517.png] 实现代码复制即可。 <template> <div>

向右看齐/ 2023年01月23日 13:49/ 0 赞/ 6 阅读

相关 Vue - route 路由中配置 404 页面

前言当路由中没有匹配时，会出现页面空白，此时应该写一个 404 页面来代替空白页面。 ![在这里插入图片描述][20210713140848646.gif] 实现

淩亂°似流年/ 2023年01月23日 06:51/ 0 赞/ 457 阅读

相关 vue刷新页面丢失404

解决方案 nginx添加配置文件下面内容加入配置文件 location @rewrites { rewrite ^(.

偏执的太偏执、/ 2022年12月29日 00:13/ 0 赞/ 238 阅读

相关 vue history模式下页面刷新，地址404

原因 vue是单页面应用，history模式路由是通过history.pushState API 实现的，页面刷新时，浏览器是根据请求路径去找对应资源，histor

叁歲伎倆/ 2022年12月27日 07:23/ 0 赞/ 198 阅读

相关 vue 404页面

一、概述如果用户输入错误的网址没有提示，界面也不会有任何变化，用户体验非常不友好，所以需要设置错误提示二、设置设置404页面需要在配置路由文件index.j

心已赠人/ 2022年11月09日 14:27/ 0 赞/ 186 阅读

相关一个非常漂亮的简约大气的table

下载： [ http://pan.baidu.com/s/1kUcJEZX][http_pan.baidu.com_s_1kUcJEZX] 或者Git: htt

小咪咪/ 2022年08月19日 01:54/ 0 赞/ 169 阅读

相关 Vue 创建 404 页面【超级简单】

目的：在vue项目中，添加一个 404 页面。具体效果，可以去这个网站测试 [http://www.xdx97.com][http_www.xdx97.

野性酷女/ 2022年04月05日 05:18/ 0 赞/ 408 阅读

相关 Vue history模式刷新页面404问题

为什么会出现404 我们先来看一下我们给到后端的`dist`文件 ![8ace095ca3a41d4151425046e0c7950a.png][] 可以

Bertha 。/ 2021年09月08日 17:58/ 0 赞/ 821 阅读