为什么Vue3路由不匹配路由？

Question

我有一个像这样设置的 Vue3 路由器：

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" },
  ],
});

但是，当我导航到 http://localhost:3000/v3/app/#/three 时没有任何反应，我在控制台中收到一条消息：

[Vue Router warn]: No match found for location with path "/#/three"

通过 console.log(JSON.stringify(router.getRoutes())) 的路由转储表明：

[
  {
    "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"
      }
    }
  }
]

添加默认路由 ("/") 会导致一切都转到默认路由。

为什么会这样，我该如何解决？

Answer 1

您的路径不匹配，因为您试图将 /three（HTML5 历史模式）与 /#/three（哈希历史模式）匹配。

使用 createWebHistory 并将所有内容重写到 non-hash 路由中作为 shown here 可能是一个很好的解决方案。特别是因为这是现在 default/most 常用的方法！

为什么Vue3路由不匹配路由？

Why does the Vue3 router not match a route?

vue.js

vue-router

vuejs3