Vue.js 带有 Vue 3 的 Vue 路由引发错误Uncaught TypeError： Object(...) is not a function

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

vue创建我的项目

想要添加两个页面，所以安装了最新版本的vue路由(目前是v3.4.8)，并遵循vue mastery tutorial for routing.

这就是我的路由.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

当然，这是我的主要观点.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>

总之，所有这些都表明我在以下方面有错误:

未捕获类型错误:对象(…)这不是一个函数

判断时(router.js？41cb:5)

这是专门针对createRouter的

我做错什么了吗？

编辑:正如Boussadjra Brahim指出的，最初的createWebHistory只是被传入，而不是函数调用.此后，我更新了代码，将其包括在内.

有趣的是，一旦这样做了，错误就不会发生在它的调用上.