feat: 添加404页面,当访问不存在资源时跳转404页

This commit is contained in:
mixtan 2025-06-18 15:50:39 +08:00
parent 5c019f48d7
commit efb4a0724b
5 changed files with 76 additions and 8 deletions

1
components.d.ts vendored
View File

@ -37,6 +37,7 @@ declare module 'vue' {
ElUpload: typeof import('element-plus/es')['ElUpload'] ElUpload: typeof import('element-plus/es')['ElUpload']
FloatingMenu: typeof import('./src/components/floatingMenu.vue')['default'] FloatingMenu: typeof import('./src/components/floatingMenu.vue')['default']
Login: typeof import('./src/components/login.vue')['default'] Login: typeof import('./src/components/login.vue')['default']
PageNotFound: typeof import('./src/components/PageNotFound.vue')['default']
Register: typeof import('./src/components/register.vue')['default'] Register: typeof import('./src/components/register.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink'] RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView'] RouterView: typeof import('vue-router')['RouterView']

View File

@ -0,0 +1,33 @@
<template>
<div class="mycontainer">
<el-result
icon="warning"
title="404请求资源不存在"
sub-title="抱歉!未找到页面"
>
<template #extra>
<el-button type="primary" @click="toHomePage">返回首页</el-button>
</template>
</el-result>
</div>
</template>
<script setup>
import { useRouter } from "vue-router";
const router = useRouter();
const toHomePage = ()=>{
router.replace('/index')
}
</script>
<style lang="scss" scoped>
.mycontainer{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
</style>

View File

@ -45,6 +45,14 @@ const routes=[
isFullpage: true isFullpage: true
} }
}, },
{
path:'/:pathMatch(.*)*',
name:'NotFound',
component:()=>import('@/components/PageNotFound.vue'),
meta:{
isFullpage: true
}
},
]; ];
const router = createRouter({ const router = createRouter({
history:createWebHistory(), history:createWebHistory(),

View File

@ -20,7 +20,7 @@
<div class="start"> <div class="start">
<el-button plain type="danger" @click="handleOpenStartPage"> <el-button plain type="danger" @click="handleOpenStartPage">
{{ {{
approval_status == 4 || !isLoggedIn ? "立即入驻" : "查看审核状态" approval_status == -1 || approval_status == 4 || !isLoggedIn ? "立即入驻" : "查看审核状态"
}} }}
</el-button> </el-button>
</div> </div>
@ -38,7 +38,7 @@
<el-button <el-button
link link
@click="handleUserInfoClick" @click="handleUserInfoClick"
:title="approval_status == 4 ? '点击立即入驻' : '点击查看审核详情'" :title="approval_status == -1 || approval_status == 4 ? '点击立即入驻' : '点击查看审核详情'"
> >
{{ mobile }} {{ mobile }}
</el-button> </el-button>
@ -101,7 +101,7 @@ const userStore = useUserStore();
// userStore // userStore
const isLoggedIn = ref(userStore.isLoggedIn); const isLoggedIn = ref(userStore.isLoggedIn);
const mobile = ref(""); const mobile = ref("");
const approval_status = ref(0); const approval_status = ref(-1);
// token // token
onMounted(() => { onMounted(() => {
@ -144,15 +144,15 @@ const handleOpenStartPage = () => {
return; return;
} }
if (approval_status.value == 4) { if (approval_status.value == -1 || approval_status.value == 4) {
router.push({ name: "start" }); router.push({ name: "start" });
} else { } else {
router.push({ name: "check" }); // check router.push({ name: "check" });
} }
}; };
const handleUserInfoClick = () => { const handleUserInfoClick = () => {
if (approval_status.value == 4) { if (approval_status.value == -1 || approval_status.value == 4) {
router.push({ name: "start" }); router.push({ name: "start" });
} else { } else {
router.push({ name: "check" }); router.push({ name: "check" });

View File

@ -84,7 +84,16 @@ import { useTransition } from "@vueuse/core";
import { ref, onMounted, defineEmits } from "vue"; import { ref, onMounted, defineEmits } from "vue";
import { Promotion, Download } from "@element-plus/icons-vue"; import { Promotion, Download } from "@element-plus/icons-vue";
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import { getApproval_status } from "@/api/login";
import { useRouter } from "vue-router";
import { useUserStore } from "@/stores/userStore";
const router = useRouter();
const userStore = useUserStore();
const isLoggedIn = ref(userStore.isLoggedIn);
const approval_status = ref(-1);
const businessman = ref(0); const businessman = ref(0);
const product = ref(0); const product = ref(0);
const member = ref(0); const member = ref(0);
@ -93,8 +102,16 @@ const order = ref(0);
const emits = defineEmits(["open-register-form"]); const emits = defineEmits(["open-register-form"]);
const openRegisterForm = () => { const openRegisterForm = () => {
console.log(1111); if (!isLoggedIn.value) {
emits("open-register-form"); emits("open-register-form");
return;
}
if (approval_status.value == -1 || approval_status.value == 4) {
router.push({ name: "start" });
} else {
router.push({ name: "check" }); // check
}
}; };
const downAndroid = ()=>{ const downAndroid = ()=>{
@ -125,6 +142,15 @@ const formatter = (value: number) => {
const formatter2 = (value: number) => { const formatter2 = (value: number) => {
return `${Math.round(value)}k+`; return `${Math.round(value)}k+`;
}; };
onMounted(()=>{
getApproval_status().then((res) => {
if (res.code === 0 && res.status === 200) {
approval_status.value = res.data.approval_status;
console.log("res.data.approval_status", res.data.approval_status);
}
});
})
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>