Vue router not changing or responding to URL

Question

Navigating from one page to the other works, but this change is not reflected in the URL path. Trying to enter a page directly from the URL (i.e. localhost:8080/explore) also just loads the home page.

I've seen under certain circumstances you need to specifically redirect all requests to index.html so vue route can handle it, but my development server is all following vue boilerplate, so I would expect it to work so far.

The Setup

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

You should change history: createMemoryHistory() to history: createWebHistory().
https://router.vuejs.org/guide/essentials/history-mode#HTML5-Mode
With Memory mode you will not have "normal" URL.