VueJS 路由自动在 url 中设置一个 '#'

Question

我一直在他们的网站上关注官方的 VueJS 路由器documentation：。我现在面临的问题是，它会自动将我重定向到 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
  });