带有 Vue 3 的 Vue 路由器引发错误“Uncaught TypeError: Object(...) is not a function”

Question

使用 CLI 创建了一个简单的 Vue 项目：

 vue create my-project

想加两页，所以安装了最新版的vue-router（目前是v3.4.8），跟着 vue精通教程学习路由。

这是我的 router.js 文件的样子：

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

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

export default router

当然，这就是我的 main.js 文件的样子：

 import { createApp } from 'vue'
import router from './router'

createApp({
  template: `
  <div>
    <router-link to='/'>Home</router-link>
    <router-link to='/create'>Create</router-link>
  </div>
  `
})
.use(router)
.mount('#app')

Home 和 About 组件都没有太多内容，它们看起来像这样：

 <template>
  <div>TODO: Home</div>
</template>

<script>
  export default {
    name: 'Home'
  }
</script>

无论如何，所有这一切都说明我收到以下错误：

未捕获的 TypeError：Object(…) 不是函数

在 eval (router.js?41cb:5)

这是专门针对 createRouter

我做错了什么吗？

编辑：正如 Boussadjra Brahim 指出的那样，最初 createWebHistory 只是被传入而不是函数调用。我已经更新了代码以包含它。

有趣的是，一旦完成，错误就不会在调用时发生。

原文由 theJuls 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

当您使用 Vue 3 安装 Vue router 3 时会出现此问题，因此您应该卸载当前版本：

 npm uninstall vue-router --save

并通过以下方式安装新的：

 npm i vue-router@next --save

例子

原文由 Boussadjra Brahim 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

就我而言，情况正好相反（我遇到了同样的错误），我安装了 vue 2.6 和 Vue Router 4，所以我不得不将 Vue Router 降级到 3.5

原文由 Andres Paul 发布，翻译遵循 CC BY-SA 4.0 许可协议