为什么 URL 查询字符串出现在主机名和路径名的中间....Vuejs？

Question

我正在学习VueJs，我想开发一个注册页面，但我觉得这里有问题，我有一个点击事件来提交数据，当我点击按钮提交时，我打印控制台中的数据，我注意到查询字符串位于主机名和路径名的中间，我不知道这是否正常。

这就是 URL 的样子：

http://localhost:8080/?email=asas%40mail.com&password=asdsa#/register

这是我的一些代码：

router.js

import Vue from 'vue'
import Router from 'vue-router'
import home from './components/home'
import register from './components/register'

Vue.use(Router)

export default new Router({
 routes: [
    {
      path: '/',
      name: 'home',
      component: home
    },
    {
      path: '/register/',
      name: 'register',
      component: register
    }
  ]
})

Register.vue

<template>
    <div>
        <form>
        <input type="text" name="email" placeholder="Email" v- 
                               model="email">
        <input type="password" name="password" placeholder="Password" 
                               v-model="password">
        <button v-on:click="clickRegister">Submit form</button>
       </form>
     </div>    
</template>
<script>
export default {
    data(){
        return{
           email:'',
           password:''
      }
   },
    methods:{
        clickRegister: function() {
            console.log(this.email)
        }
    }
}
</script>
<style scoped>

</style>

App.vue

<template>
    <div id="app">
       <router-view></router-view>
   </div>
</template>
<script>
export default {

 }
</script>


<style>

</style>

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './registerServiceWorker'

Vue.config.productionTip = false

new Vue({
  router,
  render: function (h) { return h(App) }
}).$mount('#app')

Answer 1

这是正常行为，因为 Vue 中 SPA 的默认行为是使用 # 来路由您的应用程序。

查询字符串实际上不在您的路径之前，它显示在包含路径的锚点之前。

您可以摆脱 # 而依赖于浏览器历史记录，因此通过将您的路由器设置为使用历史记录模式来使用正常路径：

export default new Router({
 mode: 'history',
 routes: [
    {
      path: '/',
      name: 'home',
      component: home
    },
    {
      path: '/register/',
      name: 'register',
      component: register
    }
  ]
})

来源：https://router.vuejs.org/guide/essentials/history-mode.html

为什么 URL 查询字符串出现在主机名和路径名的中间....Vuejs？

why URL Query string appears in middle of hostname and the path name.... Vuejs?

vue.js

vue-router