Vue3设置404页面

2021-10-29  本文已影响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"
  }
上一篇下一篇

猜你喜欢

热点阅读