Javascript 如何解决未捕获（承诺中）导航重复：避免到当前位置的冗余导航：

我一直坚持在我的Web控制台中解决这个错误。我正在使用Vue和Vue/cli开发此web应用程序。当我试图在代码末尾添加一个catch来处理错误时，我的vue渲染无法加载

该错误在更新时给出，这是vue可以处理的唯一可行的模型，以显示用户登录

最终，我会将_user vue添加到web应用程序中，以处理新用户创建，这将与我现在正在处理的登录vue相关联

未捕获（承诺中）导航重复：避免了对当前位置的冗余导航：“/login”

这是项目的/router文件夹中的我的index.js

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

<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>

这是我的App.vue，位于项目的/src文件夹中

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

<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>

注销
从“./components/Banner”导入横幅
从“./components/Login”导入登录名
从“./components/Secure”导入安全
导出默认值{
名称：“应用程序”，
组成部分：{
横幅，安全，登录
},
数据（）{
//初始化经过身份验证的登录和测试帐户的变量，以便通过组件使用
返回{
认证：假，
测试帐户：{
用户名：“john”，
密码：“密码”
}
}
},
安装的（）{
//如果当前未进行身份验证，则这有助于防止访问受保护的页面
如果（！this.authenticated）{
这个.$router.replace（{name:“login”}）；
}
},
方法：{
//处理登录状态和注销状态以供使用的方法
setAuthenticated（状态）{
this.authenticated=状态；
},
注销（）{
this.authenticated=false
}
},
}
#应用程序{
字体系列：Avenir、Helvetica、Arial、无衬线字体；
-webkit字体平滑：抗锯齿；
-moz osx字体平滑：灰度；
文本对齐：居中；
颜色：#2c3e50；
边缘顶部：60像素；
}

这是登录.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>

登录
登录
导出默认值{
名称：'登录'，
数据（）{
返回{
输入：{
用户名：“”，
密码：“”
}
};
},
方法：{
登录（）{
//从输入中获取输入，并与app.bue数据部分中的测试帐户检查帐户信息
if（this.input.username！=“”&this.input.password！=“”）{
if（this.input.username==this.$parent.testAccount.username&&this.input.password==this.$parent.testAccount.password）{
此$$emit（“已验证”，true）；
这个.$router.replace（{name:“secure”}）；
}否则{
console.log（“用户名和/或密码不正确”）；
}
}否则{
console.log（“必须有用户名和密码”）
}
}
},
}