手写VUE后台管理系统8 - 配置404NotFound路由

设置404页面


配置路由

这里配置了两个路由,一个是主页,另外一个则匹配任意路由显示为404页面。因为只配置了两个路由,如果路径没有匹配到主页,则会被自动导向到404页面,这样就可以实现整站统一的404页面。

ts 复制代码
import { RouteRecordRaw } from "vue-router"

const routes: RouteRecordRaw[] = [{
    name: "Home",
    path: '/',
    component: () => import('@/views/dashboard/home/Index.vue')
}, {
    path: '/:pathMatch(.*)',
    component: () => import('@/views/exception/404.vue')
}]

export default routes

404页面

使用 ant 提供的组件实现 404 页面

html 复制代码
<template>
    <a-result status="404" title="404" sub-title="页面不存在">
        <template #extra>
            <a-button type="primary">返回首页</a-button>
        </template>
    </a-result>
</template>

页面显示如下

相关推荐
JNU freshman2 小时前
Element Plus组件
前端·vue.js·vue3
却尘4 小时前
Vite 炸裂快,Webpack 稳如山,Turbopack 想两头要:谁才是下一个王?
前端·面试·vite
萌萌哒草头将军1 天前
尤雨溪宣布 oxfmt 即将发布!比 Prettier 快45倍 🚀🚀🚀
前端·webpack·vite
晓得迷路了1 天前
栗子前端技术周刊第 102 期 - Vite+ 正式发布、React Native 0.82、Nitro v3 alpha 版...
前端·javascript·vite
Sheldon一蓑烟雨任平生3 天前
Vue3 列表渲染
vue.js·vue3·v-for·列表渲染·vue3 列表渲染·v-for 循环对象·v-for与计算属性
duansamve3 天前
TS在Vue3中的使用实例集合
typescript·vue3
ღ᭄ꦿ࿐Never say never꧂3 天前
微信小程序 Button 组件 open-type 完全指南:从用户信息获取到客服分享的实战应用
spring boot·微信小程序·小程序·uni-app·vue3
Sheldon一蓑烟雨任平生4 天前
Vue3 Class 与 Style 绑定
vue.js·vue3·class与style绑定·绑定class·绑定style·vue3绑定class·vue3绑定style
jason_yang4 天前
vue3中使用auto-import与cdn插件冲突问题
vue.js·vite·cdn
进阶的鱼4 天前
React+ts+vite脚手架搭建(五)【规范篇】
前端·react.js·vite