How to solve Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location:

Question

I'm stuck on solving this error in my Web Console. I'm using Vue and Vue/cli to develop this web application. When I try to add a catch to the end of the code to handle the error my vue rendering is not able to load.

The error is given on updates and this is the only workable mock up vue can handle to show the user login.

Eventually I will add and add_user vue to the web app to handle new user creation that will tie in to the login vue I'm working on now.

Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/login".

This is my index.js in /router folder for the project

import VueRouter from 'vue-router'
import LoginComponent from "@/components/Login.vue"
import SecureComponent from "@/components/Secure.vue"

Vue.use(VueRouter)

const routes =  [
        {
            path: '/',
            redirect: {
                name: "login"
            }
        },
        {
            path: "/login",
            name: "login",
            component: LoginComponent
        },
        {
            path: "/secure",
            name: "secure",
            component: SecureComponent
        }
    ]

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
  })

  export default router

And this is my App.vue in my /src folder for the project

<template>
  <div id="app">
    <Banner/>
    <Login/>
        <div id="nav">
          <router-link v-if="authenticated" to="/login" v-on:click.native="logout()" replace>Logout</router-link>
        </div>
        <router-view @authenticated="setAuthenticated" />
  </div>
</template>

<script>
import Banner from './components/Banner'
import Login from './components/Login'
import Secure from './components/Secure'


export default {
  name: 'App',
  components: {
    Banner,Secure,Login
  },
  data() {
    //initialize variable for authenticated login and Test Account for use through the component
    return {
      authenticated: false,
      testAccount: {
        username: "john",
        password: "password"
      }
    }
  },
  mounted() {
    //if not currently authenticated, then this helps prevent from going to protected pages
    if(!this.authenticated){
      this.$router.replace({ name: "login"});
    }
  },
  methods: {
    //methods to handle login status and logout status for use
    setAuthenticated(status){
      this.authenticated = status;
    },
    logout(){
      this.authenticated = false
    }
  },
  
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

This is the code for the Login.vue

<template>
    <div id="login">
        <h1>Login</h1>
        <input type="text" name="username" v-model="input.username" placeholder="Username"/>
        <input type="text" name="password" v-model="input.password" placeholder="Password"/>
        <button type="button" v-on:click="login()">Login</button>
    </div>
</template>


<script>
export default {
  name: 'Login',
  data() {
      return {
          input: {
              username: '',
              password: ''
          }
          
      };
  },
  methods: {
      login(){
          //takes input from input and checks it with test account in app.bue data section for account info
          if(this.input.username != "" && this.input.password != ""){
              if(this.input.username == this.$parent.testAccount.username && this.input.password == this.$parent.testAccount.password){
                  this.$$emit("authenticated", true);
                  this.$router.replace({ name: "secure" });
              } else {
                  console.log("The user name and / or password is incorrect");
              }
          } else{
              console.log("A username and password must be present")
          }
      }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

Answer 1

i think you try to go to same place - to avoid this error you can do this:

this.$router.replace({ name: "login"}).catch(()=>{});