当前位置：首页 > news >正文

vue3:三项目增加404页面

news 来源：原创 2025/6/18 11:14:36

一、路由添加

1、官网地址

带参数的动态路由匹配 | Vue Routerhttps://router.vuejs.org/zh/guide/essentials/dynamic-matching.html

2、复制核心语句

{ path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound }

3、粘贴到路由index.js中

4、建立页面

在view文件夹中建立NotFoundView.vue文件夹

5、修改路由中404页面的路径

将404页面路路径指定刚才新建立的页面

二、编写404页面代码

1、页面效果

2、代码展示

①404页面编辑

NotFoundView.vue

<template>
    <div class="page flex flex-center">
        <div class="content flex  flex-between">
            <div class="img flex flex-center">
                <img src="/public/img/404.png" alt="=" srcset="">
            </div>
            <div class="title flex flex-center flex-column">
                <p>The page does not exist</p>
                <div>
                    <router-link to="/">
                        <el-button>返回主页</el-button>
                    </router-link>
                </div>
            </div>
        </div>
    </div>
</template>

<style>
.page {
    height: 100vh;
    background-color: #eaf0fe;
}

.content {
    height: 400px;
    width: 800px;
    border-radius: 10px;
}

.content .img {
    height: 100%;
    width: 45%;
    background-color: #abc4fc;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.img img {
    width: 80%;
    height: 80%;
}

.title {
    background-color: #fff;
    width: 55%;
    height: 100%;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

p {
    margin-bottom: 20px;
    font-size:20px;
}

:root {
    --el-fill-color-blank: #f97ca7;
    --el-text-color-regular: #fff;
    --el-color-primary: #f97ca7;
    --el-color-primary-light-9: #fff;
    --el-color-primary-light-7: #f97ca7;
    --el-border-radius-base:20px;
    --el-font-size-base:12px;
}
</style>

注：

el按钮的样式编写