uni-app 外部App打开指定页面时 App.vue 生命周期onShow函数通过uni.navigateTo跳转页面报错

uni-app 外部App打开指定页面时 App.vue 生命周期onShow函数通过uni.navigateTo跳转页面报错

开发环境 版本号 项目创建方式
Windows Windows10 v1809 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

手机系统：Android

手机系统版本号：Android 11

手机厂商：华为

手机机型：华为 mate 30

页面类型：vue

打包方式：云端

示例代码：

onShow: function() {  
    let args = plus.runtime.arguments;  
    if (args) {  
        const page = args.substring(args.indexOf('//') + 2, args.indexOf('&'));  
        const id = args.substring(args.indexOf('&') + 1);  
        const url = `pages/${page}/${page}?id=${id}`;  
        if (page && id) {  
            uni.navigateTo({  
                url: url,  
                fail: err => {  
                    //这里报错，无法跳转成功  
                    console.log(err);  
                }  
            });  
        }  
    }  
},

操作步骤：

onShow: function() {  
    let args = plus.runtime.arguments;  
    if (args) {  
        const page = args.substring(args.indexOf('//') + 2, args.indexOf('&'));  
        const id = args.substring(args.indexOf('&') + 1);  
        const url = `pages/${page}/${page}?id=${id}`;  
        if (page && id) {  
            uni.navigateTo({  
                url: url,  
                fail: err => {  
                    //这里报错，无法跳转成功  
                    console.log(err);  
                }  
            });  
        }  
    }  
},

预期结果：

每次跳转页面路由正常

实际结果：

{
    "errMsg": "navigateTo:fail page `/pages/home/pages/classCatagory/classCatagory?id=5116c4bc-7c8f-4a74-a122-5c7fe22e930c` is not found"
}

bug描述：

外部App打开指定页面，App.vue 生命周期中的onShow函数通过uni.navigateTo跳转页面，报错信息：

"errMsg": "navigateTo:fail page `/pages/home/pages/classCatagory/classCatagory?id=5116c4bc-7c8f-4a74-a122-5c7fe22e930c`
期望的页面路径为/pages/classCatagory/classCatagory
实际为/pages/home/pages/classCatagory/classCatagory
目前可知原因：
app首次启动时，页面栈为空，可以直接跳转到目标页面，当第二次进入时此时页面栈中已经包含home（主页面），因此该api uni.navigateTo 报错。

更多关于uni-app 外部App打开指定页面时 App.vue 生命周期onShow函数通过uni.navigateTo跳转页面报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

请问问题解决了吗？

更多关于uni-app 外部App打开指定页面时 App.vue 生命周期onShow函数通过uni.navigateTo跳转页面报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题的核心在于页面栈管理和跳转时机。当App首次启动时页面栈为空，uni.navigateTo可以正常跳转。但当App已经运行并存在页面栈时，在App.vue的onShow中直接使用uni.navigateTo会导致路径叠加。

从错误信息看，实际路径变成了/pages/home/pages/classCatagory/classCatagory，说明当前页面栈中已存在home页面，uni.navigateTo是基于当前页面路径进行相对跳转的。

解决方案：

  1. 使用绝对路径：确保URL以/开头
const url = `/pages/${page}/${page}?id=${id}`;
  1. 添加页面栈检查：在跳转前判断当前页面栈状态
onShow: function() {  
    let args = plus.runtime.arguments;  
    if (args) {  
        const page = args.substring(args.indexOf('//') + 2, args.indexOf('&'));  
        const id = args.substring(args.indexOf('&') + 1);  
        const url = `/pages/${page}/${page}?id=${id}`;  
        if (page && id) {  
            // 获取当前页面栈
            const pages = getCurrentPages();
            if(pages.length === 0) {
                // 页面栈为空，使用navigateTo
                uni.navigateTo({  
                    url: url
                });  
            } else {
                // 页面栈不为空，使用redirectTo或reLaunch
                uni.redirectTo({  
                    url: url
                });  
            }
        }  
    }  
}
  1. 考虑使用uni.reLaunch：完全重启应用并跳转到指定页面
uni.reLaunch({
    url: url
});
  1. 延迟跳转：确保页面完全初始化
setTimeout(() => {
    uni.navigateTo({  
        url: url
    });  
}, 100);
回到顶部