uni-app - H5 页面路由不存在时，跳转到自己定制的 404.vue 页面（当路由不存在时自动重定向到自定义的 404 组件）超详细简约高效的解决方案

蔡来了

已于 2025-01-19 16:14:48 修改

阅读量4.5k

点赞数 6

CC 4.0 BY-SA版权

分类专栏： + UniApp + Uniapp 开发问题汇总文章标签： uni-app H5 路由不存在则跳转实现方法详细教程 uniapp 404

于 2022-11-17 14:52:33 首次发布

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/weixin_44198965/article/details/127902385

+ UniApp 同时被 2 个专栏收录

216 篇文章 ¥9.90 ¥99.00

订阅专栏

+ Uniapp 开发问题汇总

129 篇文章 ¥9.90 ¥99.00

订阅专栏

本文详细介绍了在 uni-app 开发 H5 项目时，如何设置当访问不存在的路由时，自动跳转到自定义的 404 页面。只需两步，包括创建 404 页面组件和利用应用生命周期监听路由错误，即可实现此功能，适用于 uniapp v2 和 v3 版本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

在 uni-app 开发 H5 移动端项目中，如果访问一个不存在的路由路径后，自定跳转重定向到自己定义的 404 页面。

本文带您从 0-1 一路复制，仅需 2 步完成 当页面 router 路由不存在，自动跳转到指定的 404 页面，

支持 uniapp v2 / v3 版本，直接跟着步骤复制即可，助您轻松完成该功能，

如下图所示，路由错误的时候自动跳转到 404 页面（文末提供效果图 404 页面的图片）：

代码干净整洁，功能无任何 BUG

在这里插入图片描述

第一步

首先准备一个 404 页面，当路由不存在时跳转到该页面。

了解本专栏

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

打赏作者

蔡来了 请作者喝杯咖啡 :)

¥1 ¥2 ¥4 ¥6 ¥10 ¥20

扫码支付：¥1

获取中

扫码支付

您的余额不足，请更换扫码支付或充值

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。