vue3+elementplus快速实现404页面

最新推荐文章于 2025-03-01 16:49:36 发布

samate6666

最新推荐文章于 2025-03-01 16:49:36 发布

阅读量997

点赞数 2

文章标签： vue.js javascript 前端 elementui

本文链接：https://blog.youkuaiyun.com/samate6666/article/details/126832826

版权

本文档展示了如何在Vue.js应用中配置路由器以处理404未找到页面的情况。通过创建一个名为`NotFound`的路由，匹配所有无效路径，并在404页面上设置一个返回首页的按钮，确保用户能够轻松导航回主页。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最终实现效果
在这里插入图片描述

1、router配置

import { createRouter, createWebHashHistory } from "vue-router";

import NotFound from '~/pages/404.vue'

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

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

在这里插入图片描述

2、404页面配置

<template>
  <el-result
    icon="warning"
    title="404提示"
    sub-title="你找的页面走丢了~"
  >
    <template #extra>
      <el-button type="primary" @click="$router.push('/')">返回首页</el-button>
    </template>
  </el-result>
</template>

<script setup>
</script>

<style>
</style>