uni-app vue3版本 app.vue中,应用生命周期onPageNotFound内使用uni.redirectTo等路由跳转方法失效

发布于 1周前 作者 yibo5220 来自 Uni-App

uni-app vue3版本 app.vue中,应用生命周期onPageNotFound内使用uni.redirectTo等路由跳转方法失效

信息类别 内容
产品分类 uniapp/H5
PC开发环境 Windows
操作系统版本 Windows 10 家庭中文版 19045.5073
HBuilderX类型 正式
HBuilderX版本 4.29
浏览器平台 Chrome
浏览器版本 128.0.6613.138(正式版本) (64 位)
项目创建方式 HBuilderX

操作步骤:

  • 访问不存在的页面,无法跳转到404页面

预期结果:

  • 访问不存在的页面,应该跳转到404页面

实际结果:

  • 访问不存在的页面,没有跳转到404页面

bug描述:

  • 后面查看这个方法,发现文档中有说明在onPageNotFound无法跳转
  • 要是不能跳转就很不方便,能不能暴露路由拦截的api出来,可以让我们自己处理?

7 回复

HBuilderX 4.41.2024121203-alpha 已修复。


同样遇到了 啊啊啊

问题确认,感谢反馈,已加分
临时解决方案:替换该文件 HBuilderX/plugins/uniapp-cli-vite/node_modules/@dcloudio/uni-h5/dist/uni-h5.es.js 为附件文件

临时解决方案不能用啊,一换上去HBuilderX各种警告,然后还要重新安装。

报什么警告,截个图,谢谢

在uni-app的Vue 3版本中,app.vue文件中的应用生命周期钩子如onPageNotFound用于处理页面未找到的情况。通常情况下,在这些钩子中使用路由跳转方法如uni.redirectTouni.navigateTo等来实现页面跳转是可行的。然而,如果你发现这些方法在onPageNotFound中失效,可能是由于一些特定的上下文或配置问题导致的。

首先,确保你的app.vue文件中正确地定义了onPageNotFound钩子,并且检查是否有其他代码或配置可能影响到路由跳转。以下是一个基本的示例,展示如何在onPageNotFound中使用uni.redirectTo进行页面跳转:

<template>
  <App />
</template>

<script setup>
import { onPageNotFound } from '@dcloudio/uni-app';

onPageNotFound((options) => {
  console.log('Page not found:', options);

  // 使用 uni.redirectTo 跳转到指定页面
  uni.redirectTo({
    url: '/pages/error/404/404', // 确保路径正确,且该页面已存在
    success: function () {
      console.log('Successfully redirected to 404 page');
    },
    fail: function (error) {
      console.error('Failed to redirect:', error);
    }
  });
});
</script>

<style>
/* 你的全局样式 */
</style>

在这个例子中,当访问一个不存在的页面时,onPageNotFound钩子会被触发,并且尝试使用uni.redirectTo跳转到/pages/error/404/404页面。如果这个方法仍然失效,你可以考虑以下几个方面:

  1. 路径验证:确保url参数指定的路径是正确的,并且该页面已经在项目中定义。
  2. 权限问题:检查是否有任何路由守卫或权限设置阻止了跳转。
  3. 调试信息:利用console.logconsole.error输出更多调试信息,以帮助你理解跳转失败的原因。
  4. API版本:确认你使用的uni-app版本是否支持在onPageNotFound中使用这些路由跳转方法。
  5. 查阅文档:查阅最新的uni-app文档,看是否有关于此问题的官方说明或更新。

如果上述方法都不能解决问题,可能需要考虑是否有更深层次的框架或平台兼容性问题,此时查看社区论坛或提交issue给uni-app的开发者团队可能是个好选择。

回到顶部