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

野性酷女 2022-04-05 05:18 410阅读 0赞

# 目的：在vue项目中，添加一个 404 页面。 #

具体效果，可以去这个网站测试      [http://www.xdx97.com][http_www.xdx97.com]

简单说明： 404 页面，也就是一个页面而已，你只需匹配相对应的 路由就好了。

### 第一步：创建一个 404 页面 ###

<template>
        <div class="error">
            <span class="aaa">404</span> <br><br><br><br><br><br>
            <span class="bbb">您可以选择导航栏任意一项回到正确航线 </span>
        </div>
    </template>
    <script>
    export default {
        
    }
    </script>
    <style lang="scss" scoped>
        .error{
            text-align: center;
            margin-top: 25px;
            height: 600px;
            .aaa{
                
                font-size: 250px;
                color: white;
                font-family: '方正舒体'
            }
            .bbb{
    
                font-size: 80px;
                color: white;
                font-family: '方正舒体'
            }
        }
    </style>

### 第二步：在 router 中配置好 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70][]

[http_www.xdx97.com]: http://www.xdx97.com
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1RvbXdpbGRib2Fy_size_16_color_FFFFFF_t_70]: /images/20220405/cbe99f076ba04a779cf6ed1a21d273f6.png

发表评论取消回复

表情：

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

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

相关阅读

相关在 GitHub 页面上创建自定义 404 页面

标题：在 GitHub 页面上创建自定义 404 页面简介： GitHub Pages 提供了一种便捷的方式来展示您的项目、个人网站或作品集。虽然拥有设计良好且功

骑猪看日落/ 2023年10月14日 13:59/ 0 赞/ 46 阅读

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

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

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

相关 vue在history模式下刷新页面404

在`vue`的项目中我们为了美化路由而选择`history`模式，但是使用了`history`模式时刷新页面会出现`404`。 import Vue from 'vu

不念不忘少年蓝@/ 2023年02月17日 14:57/ 0 赞/ 8 阅读

相关 Vue - 简约大气 404 页面

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

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

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

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

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

相关 vue刷新页面丢失404

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

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

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

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

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

相关 vue 404页面

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

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

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

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

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

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

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

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