/?#/ 在带有 Vue-router 的 Vue 中意味着什么？

Question

大家好，我的页面有一个错误。当我点击一个按钮时，它会自动刷新页面（我不想要）但是 ?# 从 http://127.0.0.1:8080/#/Login.

刷新为http://127.0.0.1:8080/?#/Login即可正常使用。我知道 # 用于 Vue-router 但 ? 是什么？

这是我的代码：

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

Answer 1

发生这种情况是因为您正在使用 <v-form> 在页面上提交表单。要阻止此默认表单提交功能，请在表单的 submit 处理程序上使用 prevent 修饰符：

<v-form class="login" v-model="loginForm" @submit.prevent="login">

这也会调用 login 方法，因此您应该从按钮中删除 @click 处理程序。

或者您可以将处理程序保留在按钮上并将其从 @submit 处理程序中删除：

<v-form class="login" v-model="loginForm" @submit.prevent>

/?#/ 在带有 Vue-router 的 Vue 中意味着什么？

What does /?#/ mean in Vue with Vue-router?

forms

vue.js

vue-router

vue-component

vuejs2