Vue 路由器在按键上复制路由

Question

我有一个登录按钮，当登录成功时，它会导航到路由 dashboard/。该按钮在点击时有效，但当我按下回车键时，它会复制路线。

流程是这样的：

登陆登录页面
按'Enter'键
到达'Dashboard'
单击浏览器后退按钮
按'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>

Answer 1

我认为您的问题是您使用事件侦听器设置事件的方式，从技术上讲您不需要，因为表单的本机和正常行为是在输入时提交。不要在您的按钮上使用点击事件，而是使用提交按钮类型和防止表单上的默认行为来捕获正常的表单提交，而不是运行您的提交功能。这对于单击按钮或按回车应该同样有效。

模板：

<form @submit.prevent="login()">
  <button type="submit">submit</button>
</form>

export default {
  methods: {
    login() {
      // stuff you want to do
    },
  }

Vuetify 应该有办法设置它的属性来做与普通形式相同的事情。但这个想法应该是一样的。

Vue 路由器在按键上复制路由

Vue router duplicates route on keypress

vue.js

vue-router

nuxt.js

vuetify.js