1、vue哈希路由中同时含有'?#'，格式：ip地址: 端口号/?#/login

最近一直在写vue2的项目，在最初完成登录页面时没什么问题，后来进行一次代码调整时，bug出现了。所写的页面也是正常的那种输入账号、密码然后点击登录按钮进行登录的那种界面。

• 1. 最初路由如下

• 2、第一次点击登录按钮时，路由变成如下所示

• 3、第二次再点击登录按钮时，才跳到所需要显示的页面

• 4、正常哈希路由应该是只有'#'，而不是这种'?#'。先说解决办法，就是在按钮的点击事件中，加一个事件修饰符'prevent'，阻止默认事件或者将button按钮从form标签的包裹中移出（目前只想到这两种方法）。为什么会出现这样的bug，这便是这篇文章的起因。

项目代码不能直接放出来，但是能将测试代码放出来，如下所示

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <div>
      <form>
        <div class="username">
          <label for="username">用户名:</label>
          <input type="text" id="name" v-model="username" />
        </div>
        <div class="password">
          <label for="password">密码:</label>
          <input type="password" id="password" v-model="password" />
        </div>
        <button @click="handleGoAbout">登录</button>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",

  data() {
    return {
      username: "admin",
      password: "123",
    };
  },

  methods: {
    async handleGoAbout() {
        this.$router.push("/about");
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  .password {
    margin: 20px 0;
  }
}
</style>

当我点击登录按钮时，页面发生了跳转，表单中的button标签默认类型是submit，所以才会出现上面的bug。刚入门前端不久，这篇文章就当是给自己提个醒，平时多注重基础。