VueJS 路由会自动在 url 中设置一个“#”

Question

我一直在关注他们网站上的官方 VueJS 路由器文档：. 我现在面临的问题是，它会自动将我重定向到 url: http://127.0.0.1:8080/#/，尽管我输入了 URL: http://127.0.0.1:8080/。

当我点击一个按钮，即设置一个新的URI对我来说，像这样同样出现：http://127.0.0.1:8080/#/foo。当我按下按钮时会发生这种情况，这应该让我到达那里。

如果我打开 URL：http://127.0.0.1:8080/foo它会自动将我的 URL 重写为http://127.0.0.1:8080/foo#/.

其他一切仍然有效，并且正在呈现路由器视图，但是对于用户而言，如果没有烦人的 # 来体验该站点肯定会很好。

如前所述，我确实遵循了 VueJS 文档，但我对某些内容进行了一些更改。但是，这些不会影响错误。

这是我的 main.js 文件。

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';
import AnotherComponent from './components/AnotherComponent.vue';

Vue.use(VueRouter);
Vue.config.productionTip = false;

const routes = [
    { path: '/foo', component: AnotherComponent }
];

const router = new VueRouter({
    routes
});

new Vue({
    router,
    render: h => h(App)
}).$mount('#app');

这是我的 App.vue

<template>
    <div id="app">
        <img alt="Vue logo" src="./assets/logo.png" />

        <router-view></router-view>
        <router-link to="/foo">Go to Foo</router-link>
        <hello-world msg="test123" />

    </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
    name: "app",
    components: {
        HelloWorld
    }
};
</script>

Answer 1

您应该使用history mode以避免哈希符号：

 const router = new VueRouter({
   mode:'history',
   routes
  });