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"
}