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

【问题标题】：Vue router with Vue 3 raises the error "Uncaught TypeError: Object(...) is not a function"带有 Vue 3 的 Vue 路由器引发错误“Uncaught TypeError: Object(...) is not a function”
【发布时间】：2021-02-11 00:07:13
【问题描述】：

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

vue 创建我的项目

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

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

这是专门针对createRouter

我做错了吗？

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

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

【问题讨论】：

标签： javascript vue.js vue-router vuejs3 vue-router4

【解决方案1】：

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

npm uninstall vue-router --save

然后安装新的：

npm i vue-router@next --save

Example

【讨论】：

我有同样的问题，但这对我没有帮助:( Vue version: 3.0.2, "vue-router": "^4.0.0-0", "@vue/cli -plugin-router": "^4.5.8"
你能丰富这个example吗？为了调试它
嗯.. 我遇到了一些 CORS 问题？（我只是在站点内路由）。这里是：codesandbox.io/s/friendly-colden-mtti2，我添加了 List 和 Detail
它对我不起作用。如果您单击此处“列表”页面中的任何链接，我会在 FF 中收到 CORS 错误，或者在 Chrome 中没有错误，但链接无效。在我的本地系统中，我与此页面标题中的 OP 有相同的错误。我尝试了你的建议，仍然没有。
继续努力

【解决方案2】：

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

npm install vue-router@4

如果您遇到问题，请参阅以下迁移指南：

https://next.router.vuejs.org/guide/migration/

【讨论】：