关于小程序pc端首次进入重定向至分包页面的白屏问题

G-221B commented 1 year ago

问题描述 在首次进入小程序pc端，触发两次重定向至分包页面时候（两次重定向，时机分别是：路由钩子的beforeEach和页面的Onload），会跳转到一个白屏的页面。

复现步骤 [复现问题的步骤] 1.整体项目结构： 2.pages.json代码：

{ "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "name": "index", "meta": { "redirectName": "indey" }, "path": "pages/index/index", "style": { "navigationBarTitleText": "uni-app" } } ], "subPackages": [ { "root": "cusPage", "name": "cusPage", "pages": [ { "name": "indey", "path": "pages/indey/indey", "style": { "navigationBarTitleText": "真正首页" } } ] } ], "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "uni-app", "navigationBarBackgroundColor": "#F8F8F8", "backgroundColor": "#F8F8F8" } }

代码描述：

3.index.vue代码

<script>
    export default {
        data() {
            return {
                title: 'Hello'
            }
        },
        onLoad() {
            uni.getSystemInfo({
                success: (res) => {
                    uni.$Router.replaceAll({
                        name: 'indey'
                    })
                }
            })
        },
        methods: {

        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .logo {
        height: 200rpx;
        width: 200rpx;
        margin: 200rpx auto 50rpx auto;
    }

    .text-area {
        display: flex;
        justify-content: center;
    }

    .title {
        font-size: 36rpx;
        color: #8f8f94;
    }
</style>

重定向逻辑描述：

router.js代码

// router.js import {RouterMount,createRouter} from 'uni-simple-router';

console.log('ROUTES', ROUTES)
const router = createRouter({
    platform: process.env.VUE_APP_PLATFORM,  
    routes: [...ROUTES]
});

const beforeEachList = [redirectRouter, base];

//全局路由前置守卫
router.beforeEach((to, from, next) => {
    for (let i = 0; i < beforeEachList.length; i++) {
        const func = beforeEachList[i];
        const goOn = func(to, from, next);
        if (!goOn) {
            break;
        }
    }
});
// 全局路由后置守卫
router.afterEach((to, from) => {
    console.log('跳转结束')
})

/**
 * @description 新旧分包路由拦截重定向,如果有配置meta并且meta.redirectName不为空，则执行这个方法
 * @param { RouteRule } to
 * @param { RouteRule } from
 * @param { function } next
 * @returns { boolean }
 */
 function redirectRouter(to, from, next) {
    const { redirectName } = to?.meta || {};
    if (redirectName) {

        // 以路由原有的跳转方式带参跳转
        next({
            name: redirectName,
            params: {},
        });
        return false;
    }
    return true;
}

/**
 * @description 兜底next
 * @param { RouteRule } to
 * @param { RouteRule } from
 * @param { function } next
 * @returns { boolean }
 */
function base(to, from, next) {
    next();
    return false;
}

export {
    router,
    RouterMount
}

6.main.js代码

import Vue from 'vue' import App from './App' import {router} from './router.js'; //路径换成自己的 Vue.use(router)

Vue.config.productionTip = false
uni.$Router = router;

App.mpType = 'app'

const app = new Vue({
  ...App
})
app.$mount()

预期结果 [使用简洁清晰的语言描述你希望生效的预期结果]

实际结果 [这里请贴上你的报错截图或文字]

系统信息: 发行平台: 微信小程序操作系统：window10 HBuilderX版本 [如使用HBuilderX，则需提供 HBuilderX 版本号] 项目创建方法 [如使用Vue-cli创建/HBuilderX] 设备信息：pc端微信3.8.0.41 uni-simple-router版本： v2.0.7

补充信息 基本整个demo的代码都贴上来了，无法复现时麻烦回复一下

G-221B commented 1 year ago

@SilurianYang 大佬过来看看呀