Vue生产构建后登录重定向报错TypeError: a.then is not a function

错误根源 #

你遇到的TypeError: a.then is not a function错误，本质是路由配置中的component工厂函数直接返回了组件对象，而非Promise。Vue Router在生产模式下会默认将component工厂函数视为异步加载逻辑，期望其返回Promise，但直接返回组件实例时，无法调用then方法，从而触发报错。开发环境因校验宽松未暴露此问题。

问题代码定位 #

你的路由里多处使用这类直接返回组件的工厂函数，比如根路径和admin相关路由：

component: function () {
    if (state.token && state.userAdmin) {
        return Users
    } else {
        return Error403
    }
}

解决方案 #

有两种规范的修复方式，推荐第一种（路由守卫方案），更符合Vue Router的设计逻辑：

方案1：使用全局路由守卫处理权限与重定向 #

将路由配置中的component改为固定值，通过全局前置守卫统一处理权限判断和页面重定向：

1. 修改路由配置，移除component中的条件判断：

const router = createRouter({
    history: createWebHistory('/'),
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home,
        },
        // 新增商家首页路由
        {
            path: '/restaurateur/home',
            name: 'home_restaurateur',
            component: HomeRestaurateur,
        },
        {
            path: "/admin/users",
            name: "admin_users",
            component: Users,
        },
        {
            path: "/admin/restaurants",
            name: "admin_restaurants",
            component: Restaurants,
        },
        // 其他路由保持原有配置...
    ],
});

2. 添加全局前置守卫：

router.beforeEach((to, from, next) => {
    // 处理首页登录后的角色重定向
    if (to.name === 'home' && state.token) {
        if (state.userAdmin) {
            next({ name: 'admin_users' });
        } else if (state.userRestaurateur) {
            next({ name: 'home_restaurateur' });
        } else if (state.userDeliverer) {
            next({ name: 'orders' });
        } else {
            next();
        }
    }

    // 处理admin路由的权限校验
    const isAdminRoute = to.name?.startsWith('admin_');
    if (isAdminRoute && !state.userAdmin) {
        next({ name: 'not_found' }); // 或跳转到403页面
    }

    // 其他情况正常放行
    next();
});

方案2：让工厂函数返回Promise #

如果坚持使用component工厂函数，需用Promise.resolve()包裹组件，确保返回值是Promise：

component: function () {
    if (state.token && state.userAdmin) {
        return Promise.resolve(Users);
    } else if (state.token && state.userRestaurateur) {
        return Promise.resolve(HomeRestaurateur);
    } else if (state.token && state.userDeliverer) {
        return Promise.resolve(Commands);
    } else {
        return Promise.resolve(Home);
    }
}

所有类似的admin路由的component工厂函数都需要做同样修改。

内容的提问来源于stack exchange，提问作者Louis P