Vue.js Vue路由器在按键时复制路由

我有一个登录按钮，当登录成功时，它将导航到路径

仪表板/

。该按钮在单击时起作用，但当我按enter键时，它会复制路线

所以流程是这样的：

• 登陆登录页面
• 按“回车”键
• 进入“仪表板”
• 单击浏览器后退按钮
• 按“回车”键

此时地址变为

http://localhost:3000/dashboard/dashboard/

而不仅仅是

http://localhost:3000/dashboard/

。更奇怪的是，如果我遵循与上面相同的流程，而是单击按钮。无论我按了多少次后退按钮，它都能正常工作。剥离部件如下所示

<template >
  <v-container>
    <v-row justify="center">
      <v-col cols='6' align="center">
        <v-form>
          <h1 class="pb-4">Login</h1>

          <v-text-field
            label="Email"
            placeholder="someone@example.com"    
          >
          </v-text-field>
          <v-text-field
            label="Password"
            type="password"
          >
          </v-text-field>

          <v-btn dark block @click="login"> Login </v-btn>
          <br />
          <a href="">Forgot your password?</a>
        </v-form>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  data() {
    return {
      showPassword: false,
    };
  },
  mounted(){
    document.addEventListener("keyup", (event) => {
      if (event.key ==='Enter') {
        this.login();
      }
    });
  },
  methods: {
    async login() {
      try {
        //throw 'Login is not setup'
        //do login logic 
        this.$router.push({ path: "dashboard/" });
        
      } catch (error) {
        console.error(error);
      }
    },
  },
};
</script>

<style>
</style>

登录
登录


导出默认值{
数据（）{
返回{
showPassword:false，
};
},
安装的（）{
document.addEventListener（“键控”，事件）=>{
如果（event.key=='Enter'）{
this.login（）；
}
});
},
方法：{
异步登录（）{
试一试{
//抛出“登录未设置”
//执行登录逻辑
这是.$router.push（{path:“dashboard/”}）；
}捕获（错误）{
控制台错误（error）；
}
},
},
};

我认为您的问题在于使用事件监听器设置事件的方式，从技术上讲，您不应该需要使用事件监听器，因为表单的本机和正常行为是在enter时提交。使用按钮类型的submit和表单上的prevent默认行为来捕获正常表单提交，而不是运行submit函数，而不是在按钮上单击事件。然后，单击按钮或按enter键时也应如此

模板：

提交

导出默认值{
方法：{
登录（）{
//你想做的事
},
}

---

Vuetify应该有一些方法来设置它的属性，使其与普通表单相同。但是想法应该是一样的。

我认为您的问题在于如何使用事件监听器设置事件，从技术上讲，您不应该使用事件监听器，因为表单的本机和正常行为是在enter时提交。而不是使用单击事件在您的按钮上，使用按钮类型的submit和表单上的prevent默认行为来捕获正常的表单提交，而不是运行submit功能。然后，单击按钮或按enter键时，这应该与此相同

模板：

提交

导出默认值{
方法：{
登录（）{
//你想做的事
},
}

---

Vuetify应该有办法将其属性设置为与普通表单相同。但是这个想法应该是一样的。

行得通！除了新的url变成

http://localhost:3000/dashboard/?

仍然可以导航到正确的页面，但仍然很有趣。也许有某种代码认为它应该添加s你的URL有一些参数。也许可以查看你的路由设置来调试这一点。或者，谁也不知道，可能是Vuetify（如果你正在使用它的话）有一些他们正在嘲笑的东西，你需要用某种道具来关闭。我想是软件包和平台的祝福和诅咒。抱歉，它工作得很完美。我忘了从buttonGood交易中删除

@click

处理程序！很高兴我能帮上忙。：）这很有效！除了新的url变成

http://localhost:3000/dashboard/？

仍然可以导航到正确的页面，但仍然很有趣。可能有某种代码认为应该向URL添加某种参数。也许可以查看路由设置以调试该位。或者，谁也不知道，可能是Vuetify（如果您在那里使用的是这种代码）有一些他们正在嘲笑的东西，你需要用某种道具来关闭它。我想是软件包和平台的祝福和诅咒。抱歉，它工作得完美无缺。我忘了从buttonGood交易中删除

@click

处理程序！很高兴我能帮上忙。：）