In some situation, my logrocket always prompt me the the following error

Navigating to current location ("/error") is not allowed

However, when i check it in my web application. It works perfectly. I have no idea why logrocket always prompt this error in some of the user.

The following is my js code

 gotoErrPage () {
      this.$router.replace({
        name: 'Error',
        query: {
          showRefresh: true,
        },
      })
    },

In some situation, my logrocket always prompt me the the following error

Navigating to current location ("/error") is not allowed

However, when i check it in my web application. It works perfectly. I have no idea why logrocket always prompt this error in some of the user.

The following is my js code

 gotoErrPage () {
      this.$router.replace({
        name: 'Error',
        query: {
          showRefresh: true,
        },
      })
    },

• javascript
• vue.js
• vue-router

Share Improve this question Follow asked Sep 23, 2019 at 6:24 Chan Yoong HonChan Yoong Hon 1,82277 gold badges3737 silver badges7373 bronze badges 1

• would you show your router config? – Chiu Commented Sep 23, 2019 at 6:45

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

Finally I understand why it happened. The error you see in the console is part of the new promise api: before, if no callbacks were supplied to router.push, errors were only sent to the global router error handler. Now, because both push and replace return a promise, if the navigation failure (anything that cancels a navigation like a next(false) or next('/other') also counts) is not caught, you will see an error in the console because that promise rejection is not caught. However, the failure was always there because trying to navigate to same location as the current one fails. It's now visible because of the promise being rejected but not caught.

I able to solve this issue with 2 solutions as following. The first solutions is using router-link.

<router-link
  to="/Error"
  v-slot="{ href, route, navigate, isActive, isExactActive }"
>

</router-link>

The second solutions is add catch in my function

   this.$router.replace({
        name: 'Error',
        query: {
          showRefresh: true,
        }).catch(err => {})