Vue 路由器未更改或响应 URL

Question

可以从一个页面导航到另一页面，但这一更改不会反映在 URL 路径中。尝试直接从 URL（即

localhost:8080/explore

）进入页面也只会加载主页。

我发现在某些情况下，您需要专门将所有请求重定向到

index.html

，以便 vue 路由可以处理它，但我的开发服务器都遵循 vue 样板，所以我希望它到目前为止可以工作。

设置

main.js

const routes = [
  { path: '/', component: Home },
  { path: '/explore', component: Explorer },
]

const router = createRouter({
  history: createMemoryHistory(),
  routes,
})

createApp(App).use(router).mount('#app')

App.vue

<template>
  <RouterView />
</template>

<script>
export default {
  name: 'App',
}
</script>

Home.vue

<template>
  <button type="submit" @click="goToExplorer">Explore</button>
</template>
<script>
export default {
  name: 'Home',
  // ...
  methods: {
    goToExplorer() {
      this.$router.push('/explore');
    }
  }
}
</script>

Answer 1

您应该将

history: createMemoryHistory()

更改为

history: createWebHistory()

。
https://router.vuejs.org/guide/essentials/history-mode#HTML5-Mode
使用内存模式，您将不会有“正常”URL。