Vue3设置404页面

作者: 简单点的笨演员 | 来源:发表于2021-10-29 11:01 被阅读0次

当你进入一个没有声明/匹配的路由页面时就会跳到404页面，比如访问了http://localhost:8080/abc无此页面，就会跳到404页面，如果没有声明一个404页面，那就会跳到一个空白页面。空白页面不友好，咱们来设置一个404页面。

新建页面，404.vue：

<template>
  <div>
    <div>当前网页不存在，请检查网址是否正常</div>
    <div>
      <router-link to="/">返回首页</router-link>
    </div>
  </div>
</template>

在Vue3路由上添加下面的路由：

  {
    path: '/404',
    name: 'notfount',
    component: () => import(/* webpackChunkName: "404" */ '../views/404.vue')
  }, 
  {
    // path: "*", // 这样用，vue3已经不支持，得下面的方式
    path: "/:pathMath(.*)", // 此处需特别注意置于最底部
    redirect: "/404"
  }