feat(router): 添加404页面并处理不存在的路由

在路由配置中添加404页面常量,并创建对应的404页面组件。修改路由拦截器,当访问不存在的路由时自动跳转到404页面。同时优化路由拦截器的返回逻辑,明确区分阻止和允许路由继续执行的情况。
This commit is contained in:
王维
2025-09-29 16:44:28 +08:00
parent 07717327fe
commit e7c40e46ec
3 changed files with 40 additions and 2 deletions

30
src/pages/404/index.vue Normal file
View File

@@ -0,0 +1,30 @@
<script lang="ts" setup>
import { HOME_PAGE } from '@/utils'
definePage({
style: {
// 'custom' 表示开启自定义导航栏,默认 'default'
navigationStyle: 'custom',
},
})
function goBack() {
// 当pages.config.ts中配置了tabbar页面时使用switchTab切换到首页
// 否则使用navigateTo返回首页
uni.switchTab({ url: HOME_PAGE })
}
</script>
<template>
<view class="h-screen flex flex-col items-center justify-center">
<view> 404 </view>
<view> 页面不存在 </view>
<button class="mt-6 w-40 text-center" @click="goBack">
返回首页
</button>
</view>
</template>
<style lang="scss" scoped>
//
</style>