/?#/ 在带有 Vue-router 的 Vue 中是什么意思？

Question

Hi everyone I have a bug with my page. When I click on a button it automatically refreshes the page (which i don't want) but with the ?# as from http://127.0.0.1:8080/#/Login .

it refreshes to http://127.0.0.1:8080/?#/Login then it works normally. I know that the # is for Vue-router but what's the ? for?

Here is my code:

<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

This happens because you're using a <v-form> which is submitting the form on the page. To prevent this default form submit functionality, use the prevent modifier on the form's submit handler:

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

This will also call the login method, so you should remove the @click handler from the button.

Or you could leave the handler on the button and remove it from the @submit handler:

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