Vue Router Navigation Guard: Maximum call stack size exceeded?

I constantly got a maximum stack size exceeded issue when trying the codes below, it’s using vue router navigation guards per-route:

import state from "../vuex-store/state.js";
import Editor from "../views/Editor";
const routes = [
    {
        path: "/editor",
        component: Editor,
        beforeEnter: (to, from, next) => {
            if (state.isAuthorized) {
                if (from.path === "/editor") {
                    next(false);
                } else {
                    next("/editor");
                }
            } else {
                next(false);
            }
        }
    }
];

Please kindly help explain to me why this recursion error is happening, and how can I solve it? Thanks a lot!

Answer

The error occurs through this expression: next("/editor");

If your statement is true you creating a infinity loop, because it triggers the beforeEnter-Method again.

To solve this issue simply replace

next("/editor");

with

next();

and it should work.

Leave a Reply

Your email address will not be published. Required fields are marked *