'Why does the Vue3 router not match a route?

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?

vue.jsvue-routervuejs3


Solution 1:[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!

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 kissu

Related Questions