Vue router with Vue 3 raises the error "Uncaught TypeError: Object(...) is not a function"

Question

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

vue create my-project

想添加两个页面，所以安装了最新版本的vue-router（目前是v3.4.8）并遵循vue mastery tutorial for routing。

这是我的 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>

无论如何，所有这一切都表明我在以下错误：

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

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

这是专门针对 createRouter

我是不是做错了什么？

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

有趣的是，完成后，调用时不会发生错误。

Answer 1

这个问题是在你用Vue 3安装Vue router 3时引起的，所以你应该卸载当前版本：

npm uninstall vue-router --save

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

npm i vue-router@next --save

Example

Answer 2

对于 vue3，您应该使用以下命令安装 @4 包：

npm install vue-router@4

如果遇到问题，请参阅以下迁移指南：Migrating from Vue 2

Answer 3

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

Vue router with Vue 3 raises the error "Uncaught TypeError: Object(...) is not a function"

Vue router with Vue 3 raises the error "Uncaught TypeError: Object(...) is not a function"

javascript

vue.js

vue-router

vuejs3

vue-router4