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

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

 

具体效果，可以去这个网站测试      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 中配置好