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

Question

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

所以流程是这样的：

• 登陆登录页面
• 按“Enter”键
• 进入“仪表板”
• 点击浏览器后退按钮
• 按“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

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

模板：

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

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

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