Vue Router 3 错误：如何解决 \

Vue Router 3 中解决“Uncaught TypeError: Object(...) 不是函数”错误

问题概述

使用 Vue 3 和最新版本的 Vue Router 时，你可能遇到过以下错误：

Uncaught TypeError: Object(...) is not a function

错误发生在 createRouter 函数调用处。

错误根源

该错误的原因在于在 router.js 文件中没有正确调用 createWebHistory 函数。

解决方法

要解决此问题，你需要修改 router.js 文件，正确调用 createWebHistory 函数，如下所示：

import { createWebHistory, createRouter } from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

const router = createRouter({
  history: createWebHistory(), // 调用 createWebHistory 函数
  routes: [
    { path: '/', name: 'Home', component: Home },
    { path: '/about', name: 'About', component: About },
  ]
})

export default router

预防措施

为了避免此类错误，请务必记住以下提示：

• 始终调用函数，即使它们没有参数。
• 仔细检查代码，特别是函数调用和参数传递。
• 在遇到错误时，仔细阅读错误消息，因为它通常包含有价值的线索。
• 使用调试工具（如浏览器开发人员工具）来隔离和解决问题。

常见问题解答

1. 我应该在哪里调用 createWebHistory 函数？

在 router.js 文件中，在创建路由器实例之前调用 createWebHistory 函数。

2. createWebHistory 函数有什么作用？

createWebHistory 函数创建一个历史记录实例，该实例用于跟踪浏览器的历史记录并管理页面之间的导航。

3. createRouter 函数的目的是什么？

createRouter 函数创建一个路由器实例，它负责管理路由、导航和路由相关状态。

4. 如果我不使用 createWebHistory 函数会怎样？

如果不使用 createWebHistory 函数，Vue Router 将无法跟踪浏览器的历史记录并管理导航。

5. 此错误与 Vue 3 中的路由 API 的哪些变化有关？

在 Vue 3 中，路由 API 经过重写，要求明确调用 createWebHistory 函数，而之前的版本中它是一个隐式步骤。