Vue项目设置404页面

原创
2022/06/01 07:40
阅读数 3.1K
  • 在vue-router中设置404 路由, 由于路由是从上到下进行匹配的,所以将未匹配的路由,即需要跳转到404页面的路由设置在最后
const routes = [
    {
        path: "/login",
        component: LoginView,
        name: "login"
    },
    {
        path: "/",
        //设置路由重定向
        redirect: "/login"
    },
...
    {
        path: '/:pathMatch(.*)*',
        name: 'NotFound',
        component: () => import('../views/Page404.vue'),
        //    404 page
    }
  • 设置404页面的具体内容
<template>
  <div class="notfound">
    <img src="../assets/images/test01.webp">
  </div>
</template>

<script>
export default {
  name: "Page404"
}
</script>

<style scoped>
img {
  height: 100vh;
  width: 100vw;
}
</style>
展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部