使用uni.reLaunch()，H5网页版页面跳转正常，但APP版页面不能立即跳转的问题

uni-app项目.vue页面代码片段：
<template>
//...
</template>
<script>
export default {
data() {
return {
tableData: [],
};
},

mounted() {  
    this.checkUserRole(); // 在页面加载时检查用户角色  
},  

methods: {  
    checkUserRole() {  
        const ruler = uni.getStorageSync('ruler');  
        console.log("当前用户的ruler", ruler);   
        if (ruler === '一般用户') {  
            // 如果是一般用户，跳转到首页  
            uni.reLaunch({  
                url: '/pages/index/index' // 跳转到首页  
            })  

        } else if (ruler === '管理员') {  
        // 如果是管理员，获取用户数据  
            this.getUser();  
        } else {  
        // 其他情况（ruler为空或未定义），也跳转到首页  
            uni.reLaunch({  
                url: '/pages/index/index' // 跳转到首页  
            })  
        }  
    },              
    async getUser() {  

//...
以上代码实现在页面加载时检查用户角色，如果是 '一般用户'，执行：url: '/pages/index/index' // 跳转到首页。
在网页H5版的实际测试运行跳转正常，但在APP版测试后，发现当程序检查到用户是 '一般用户'时，界面并没有马上切换到首页，而是短暂的显示了本<template>的界面，然后界面再切换到首页，
然后使用beforeMount生命周期钩子来检查用户角色： beforeMount() {
this.checkUserRole(); // 在页面挂载之前检查用户角色
},问题任然存在。
后又修改为： // 如果是一般用户，延迟执行跳转到首页
setTimeout(() => {
uni.reLaunch({
url: '/pages/index/index' // 跳转到首页
});
}, 0); // 延迟0毫秒，即在下一个事件循环中执行跳转

问题任然存在，请问以上现象是啥原因造成的，在结构上应该如何修改。