Vue 路由器 - 访问 Vue 实例而不调用 next()答案

【问题标题】：Vue Router - Accessing the Vue instance without calling next()Vue 路由器 - 访问 Vue 实例而不调用 next()
【发布时间】：2020-06-29 11:44:49
【问题描述】：

如果验证失败，我正在尝试一种将我的 SPA 推送到路由的方法。我正在使用beforeRouteEnter 和beforeRouteUpdate 方法来运行一个函数来确定这一点；

...
beforeRouteEnter(to, from, next) {
    loading(next);
},
beforeRouteUpdate(to, from, next) {
    loading(next);
},
...

然后验证这个函数（这只是暂时的，直到我弄清楚了）。

let loading = function(callback) {
    db.commit('setPageLoading', true);
    new requests().concat([
        'UserController@userDetails',
        'SettingController@settings',
        'ClientController@allClients',
        'StatsController@statsUsage',
        'UserController@paymentDetails'],
    () => {
        db.commit('setPageLoading', false);
        /** everything's all gravy, `next()` should be called now! */
        callback();
    },
    (error) => {
        /**
        * I dont want to call `next()` to access the vue instance as it will show the requested page
        * but I have to to access the router!!!
        **/
        callback(vm => {
            switch(error.response.status) {
                case 401:
                    /** Put login box here, this will do for now **/
                    vm.$router.push('/login').catch(err => {});
                break;
                /** Custom error to tell the SPA the user needs to fill in their company details first */
                case 498:
                    for(let i in error.response.data.errors) {
                        db.commit('addErrorNotification', error.response.data.errors[i][0]);
                    }
                    vm.$router.push('/profile').catch(err => {});
                break;
            }
        });
    });
};

我的问题是我必须调用 next() 来访问 vue 实例以推送到不同的路由。但是我调用 next() 回调，它告诉 Vue Router 继续加载当前或待处理的路由，这不是我想要发生的。

谁能告诉我如何在不调用 next() 回调的情况下访问 Vue 实例？

问候

【问题讨论】：

如何使用参数调用next，例如你想推的路线？例如。 next('/profile').
嗨@DelenaMalan 感谢您的评论。很抱歉，我不太明白，你能给我举个例子吗？
@DelenaMalan 因为需要逻辑来确定是否/在哪里推送
@DelenaMalan 啊我现在明白了！我马上就回来！
cool :) 不确定您是否知道可以将参数传递给next。列出了支持的参数here。

标签： vue.js vue-router

【解决方案1】：

正如 Delena Malan 所述，谢谢！

let loading = function(callback) {
    db.commit('setPageLoading', true);
    new requests().concat([
        'UserController@userDetails',
        'SettingController@settings',
        'ClientController@allClients',
        'StatsController@statsUsage',
        'UserController@paymentDetails'],
    () => {
        db.commit('setPageLoading', false);
        /** everything's all gravy, `next()` should be called now! */
        callback();
    },
    (error) => {
        switch(error.response.status) {
            case 401:
                /** Put login box here, this will do for now **/
                callback({ path: '/login' });
            break;
            case 498:
                for(let i in error.response.data.errors) {
                    db.commit('setNotifications', []);
                    db.commit('addErrorNotification', error.response.data.errors[i][0]);
                }
                callback({ path: '/profile' });
            break;
        }
        db.commit('setPageLoading', false);
    });
};

【讨论】：