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

【问题标题】：What does /?#/ mean in Vue with Vue-router?/?#/ 在带有 Vue-router 的 Vue 中是什么意思？
【发布时间】：2021-02-23 08:25:19
【问题描述】：

大家好，我的页面有问题。当我点击一个按钮时，它会自动刷新页面（我不想要），但?# 来自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>

【问题讨论】：

用于查询参数。不过，它不应该出现在哈希之前。
是的，这就是我不明白的地方，而且我什至没有在这个页面上使用参数
听起来这个按钮没有达到您的预期。可以出示一下代码吗？
奇怪的是，当我点击按钮时，它会刷新页面？然后一切都按预期进行

标签： forms vue.js vuejs2 vue-component vue-router

【解决方案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>

【讨论】：