Forms /？#/在使用Vue路由器的Vue中是什么意思？

大家好，我的页面有一个bug。当我点击一个按钮时，它会自动刷新页面（我不想要），但会从

http://127.0.0.1:8080/#/Login

它刷新为

http://127.0.0.1:8080/?#/Login

然后它就可以正常工作了。我知道

#

是为Vue路由器设计的，但是

？

是为什么设计的

这是我的密码：

<template>
  <v-content class="login">
    <v-card
      class="mx-auto"
      max-width="400"
      max-height="1000"
    >
    <v-list-item>
      <v-list-item-content>
        <v-list-item-title class="headline">{{$t("loginPage.title")}}</v-list-item-title>
        <v-list-item-subtitle>{{$t("loginPage.subtitle")}}</v-list-item-subtitle>
      </v-list-item-content>
    </v-list-item>
      <v-form class="login" v-model="loginForm">
        <v-card-text>
          <v-text-field
            :label="$t('loginPage.username')"
            solo
            type="text"
            required
            :rules="userNameRules"
            v-model="username"
          >
          </v-text-field>
          <v-text-field
            :label="$t('loginPage.password')"
            solo
            :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
            :type="showPassword ? 'text' : 'password'"
            @click:append="showPassword = !showPassword"
            :rules="passwordRules"
            required
            v-model="password"
          >
          </v-text-field>
        </v-card-text>
        <v-card-actions>
          <v-btn
            @click="login"
            tile
            :disabled="!loginForm"
            :loading="loadingButton"
            color="primary"
            block
            type="submit"
            >{{$t('loginPage.loginButton')}}
          </v-btn>
        </v-card-actions>
      </v-form>
    </v-card>
    <v-container>
      <v-row justify="center">
        <v-col cols="12" md='4'>
          <v-alert type="error" v-if='loginError'>{{ $t('loginPage.errorLoging') }}</v-alert>
          <v-alert type="warning" v-if='logged'>{{ $t('loginPage.alreadyLoged', {user: currentUsername}) }}</v-alert>
        </v-col>
      </v-row>
    </v-container>
  </v-content>
</template>

<script>
export default {
  /* eslint-disable */
  name: 'Login',
  data () {
    return {
      username: '',
      password: '',
      showPassword: false,
      loginError: false,
      logged: false,
      currentUsername: '',
      loginForm: false,
      userNameRules: [
        v => !!v || this.$t('loginPage.isRequired', {leOula: 'Le', item: this.$t('loginPage.username')})
      ],
      passwordRules: [
        v => !!v || this.$t('loginPage.isRequired', {leOula: 'Le', item: this.$t('loginPage.password')})
      ],
      loadingButton: false
    }
  },
  mounted: function () {
    console.log("mounted function called")
  },
  methods: {
    login: function () {

      console.log("login function called")
    }
  }
}
</script>

{{$t（“loginPage.title”）}
{{$t（“loginPage.subtitle”）}
{{$t（'loginPage.loginButton'）}
{{$t（'loginPage.errorLoging'）}
{$t（'loginPage.alreadyLoged'，{user:currentUsername}}}
导出默认值{
/*eslint禁用*/
名称：'登录'，
数据（）{
返回{
用户名：“”，
密码：“”，
showPassword:false，
登录错误：false，
记录：false，
当前用户名：“”，
loginForm:false，
用户名规则：[
v=>！！v | | this.$t（'loginPage.isRequired'，{leOula:'Le'，item:this.$t（'loginPage.username'））
],
密码规则：[
v=>！！v | | this.$t（'loginPage.isRequired'，{leOula:'Le'，item:this.$t（'loginPage.password'））
],
加载按钮：false
}
},
挂载：函数（）{
log（“装入的函数被调用”）
},
方法：{
登录：函数（）{
log（“调用登录函数”）
}
}
}

发生这种情况是因为您正在使用一个

来提交页面上的表单。要阻止此默认表单提交功能，请在表单的

submit

处理程序上使用

prevent

修饰符：

这也将调用

login

方法，因此您应该从按钮中删除

@click

处理程序

或者您可以将处理程序保留在按钮上，并将其从

@submit

处理程序中删除：

用于查询参数。它不应该在散列之前出现。是的，这是我不明白的，而且我甚至没有在这个页面上使用params。听起来这个按钮没有达到你的预期。你能显示代码吗？奇怪的是，当我点击按钮时，它会用？然后一切按预期进行