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

Question

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

vue 创建我的项目

想加两个页面，所以安装了最新版本的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>

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

未捕获的类型错误：Object(...) 不是函数

在 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

例子