Production of front-end 404 page

Table of contents

1. Background

2. The code refers to the element-plus framework

3. Routing configuration

---

1. Background

 Front-end development often encounters the problem that the input path does not exist. For this reason, the 404 from the previous project is taken out for your reference. The code is very simple and suitable for beginners to start with. The effect is as follows:

2. The code refers to the element-plus framework

<template>
    <div>
        <el-result icon="warning" title="404提示" sub-title="你找的页面不存在，点击下方按钮回家~">
            <template #extra>
                <el-button type="primary" @click="$router.push('/')">回到home页</el-button>
            </template>
        </el-result>
    </div>
</template>

3. Routing configuration

import { createRouter, createWebHashHistory } from 'vue-router'

import Index from '~/pages/index.vue'
import NOTFOUND from '~/pages/404.vue'

const routes = [{
    path: "/",
    component: Index,
}, {
    path: '/:pathMatch(.*)*',
    name: 'NOTFOUND',
    component: NOTFOUND
}]

const router = createRouter({
    history: createWebHashHistory(),
    routes
})


export default router