具有Vue 3的Vue路由器会引发错误“未捕获的TypeError:Object(...)不是函数". [英] Vue router with Vue 3 raises the error "Uncaught TypeError: Object(...) is not a function"

问题描述

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

Created a simple Vue project using the CLI:

创建我的项目

想要添加两个页面，因此安装了最新版本的vue-router(当前为v3.4.8)，并遵循了

Wanted to add two pages, so installed the latest version of vue-router (which is currently v3.4.8) and followed the vue mastery tutorial for routing.

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

This is what my router.js file looks like:

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文件的样子:

And of course, this is what my main.js file looks like:

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组件中实际上并没有太多东西，这就是它们的样子:

Both of the Home and About components don't really have much in them, this is what they look like:

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

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

无论如何，所有这些都表明我在以下错误:

Anyway, all of this to say that I am getting the following error on:

未捕获的TypeError:Object(...)不是函数

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

在评估时(router.js?41cb:5)

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

这是专门针对 createRouter

我做错了什么吗?

正如Boussadjra Brahim指出的那样，最初的 createWebHistory 只是被传递而没有进行函数调用.此后，我更新了代码以包含此代码.

as Boussadjra Brahim pointed out, originally createWebHistory was just being passed in without being a function call. I've since updated the code to include this.

有趣的是，一旦完成，调用该错误就不会发生.

Interestingly enough, once that was done, the error is not happening upon it's call.

推荐答案

此问题是在将Vue路由器3与Vue 3一起安装时引起的，因此应卸载当前版本:

This issue is caused when you install Vue router 3 with Vue 3 so you should uninstall the current version :

npm uninstall vue-router --save

并通过安装新的:

npm i vue-router@next --save

示例

这篇关于具有Vue 3的Vue路由器会引发错误“未捕获的TypeError:Object(...)不是函数".的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！