Vue-router: beforeEach next will expose `Uncaught (in promise) undefined` in the console

[hezhongfeng]

Version

3.1.2

Reproduction link

http://jsrun.pro/cdbKp/edit

Steps to reproduce

1. I want to add some query in beforeEach
2. I use next

        next({
            path: to.path,
            query: to.query
        });

1. then enter beforeEach again
2. then next() will Uncaught (in promise) undefined in the console

What is expected?

no error

What is actually happening?

Uncaught (in promise) undefined in the console

---

How to avoid such error？

[hezhongfeng]

function getKey(src) {
    return src.replace(/[xy]/g, function (c) {
        let r = (Math.random() * 16) | 0;
        let v = c === 'x' ? r : (r & 0x3) | 0x8;
        return v.toString(16);
    });
}
router.beforeEach((to, from, next) => {
    if (!to.query['test']) {
        to.query['test'] = getKey('xxxxxxxx');
        next({
            path: to.path,
            query: to.query
        });
    } else {
       // here will console `Uncaught (in promise) undefined`
        next();
    }
});

[posva]

see https://github.com/vuejs/vue-router/issues/2873

Note that in your repro you are always pushing to /foo. Everything is explained in the comments linked in that issue response

[hezhongfeng]

@posva
thank you for your explain.
I have known I next() one route twice.
And I just want to add some query , do you have any better way to do?