vue3+elementplus快速实现404页面

最新推荐文章于 2024-06-20 14:13:51 发布

samate6666

最新推荐文章于 2024-06-20 14:13:51 发布

阅读量807

点赞数 2

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

本文链接：https://blog.csdn.net/samate6666/article/details/126832826

版权

Vue.js 路由配置 404页面 web开发前端框架

关键词由CSDN通过智能技术生成

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

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>