Why does the Vue3 router not match a route? - vue.js

Question

I have a Vue3 router set up like this:
var router = VueRouter.createRouter({
history: VueRouter.createWebHistory('/v3/app/'),
routes: [
{ path: '/index', component: Vue.defineAsyncComponent(() => import('/components/index.js')), name: "index" },
{ path: '/three', component: Vue.defineAsyncComponent(() => import('/components/three.js')), name: "three" },
],
});
However, when I navigate to http://localhost:3000/v3/app/#/three nothing happens and I get a message in the console that says:
[Vue Router warn]: No match found for location with path "/#/three"
A dump of routes via console.log(JSON.stringify(router.getRoutes())) shows this:
[
{
"path": "/index",
"name": "index",
"meta": {},
"props": {
"default": false
},
"children": [],
"instances": {},
"leaveGuards": {},
"updateGuards": {},
"enterCallbacks": {},
"components": {
"default": {
"name": "AsyncComponentWrapper"
}
}
},
{
"path": "/three",
"name": "three",
"meta": {},
"props": {
"default": false
},
"children": [],
"instances": {},
"leaveGuards": {},
"updateGuards": {},
"enterCallbacks": {},
"components": {
"default": {
"name": "AsyncComponentWrapper"
}
}
}
]
and adding a default route ("/") results in everything going to the default route.
Why is that and how can I fix it?

Answer 1

Your path is not matching because you're trying to match /three (HTML5 history mode) with /#/three (hash history mode).
Using createWebHistory and rewriting everything into non-hash routes as shown here may be a good solution. Especially because this is the default/most common approach nowadays!