非法请求显示404页面

最新推荐文章于 2024-11-02 08:58:20 发布

@tg

最新推荐文章于 2024-11-02 08:58:20 发布

阅读量674

点赞数 20

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_74060440/article/details/135640615

版权

本文介绍了如何在Vue3项目中使用vue-router和Vite构建404页面，包括在PC和APP端的页面结构、样式设置以及如何配置路由，确保非法请求统一跳转到404页面。

摘要由CSDN通过智能技术生成

用户在访问不存在路由时，会显示404页面，用户可自行切换页面或回到首页

404页面作为一个通用页面，任何非法请求，全部都会跳转到404页面上

###

应用到的技术栈

vue3 -- vue-router -- vite -- less

###

进入正题了

###

这里是需要用到的图片

###

PC端编写

首先在views里创建文件夹404，例如404/index.vue

页面搭建

<template>
    <div class="undefind">
        <h1> 404 <span><a href="#" @click="router.push('/home')">点我回首页😊</a></span>
            <h2>当前页面还在开发中，敬请期待......</h2>
        </h1>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
</script>

<style lang="less" scoped>
* {
    margin: 0;
    padding: 0;
}

.undefind {
    background-image: url('../../assets/01da295b2749baa8012034f792b59f.jpg@2o.jpg');
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;

    h1 {
        text-align: center;
        margin-top: 600px;

        a {
            text-decoration: none;
            color: red;
        }
    }
}
</style>

路由配置

import { createRouter, createWebHistory } from "vue-router";
import Home from "../views/Home.vue";

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      name: "login",
      component: () => import("../views/Login.vue"),
    },
    {
      path: "/home",
      name: "home",
      component: Home,
    },
    
    // 关键在这里，这里是需要配置的路由
    {
      path: "/404",
      component: () => import("../views/404/index.vue"),
      name: "404",
    },
    {
      path: "/:pathMatch(.*)",
      // 重定向
      redirect: "/404",
      name: "any",
    },
  ],
});

export default router;

###

APP端编写

app的编写和pc的一样，可以看着写一下

页面搭建

<template>
    <div class="undefind">
        <h3><span><a href="#" @click="router.push('/home')">点我回首页😊</a></span>
            <h5>页面开发中，敬请期待......</h5>
        </h3>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
</script>

<style lang="less" scoped>
* {
    margin: 0;
    padding: 0;
}

.undefind {
    background-image: url('../../assets/01b64e5bcec3b5a8012099c88a6e0b.png');
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;

    h3 {
        text-align: center;
        margin-top: 550px;

        a {
            text-decoration: none;
            color: red;
        }
    }
}
</style>

路由配置

import { createRouter, createWebHistory } from "vue-router";
import Home from "../views/Home.vue";

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      name: "login",
      component: () => import("../views/Login.vue"),
    },
    {
      path: "/home",
      name: "home",
      component: Home,
    },
    // 配置404页面路由
    {
      path: "/404",
      component: () => import("../views/404/index.vue"),
      name: "404",
    },
    {
      path: "/:pathMatch(.*)",
      redirect: "/404",
      name: "any",
    },
  ],
});

export default router;