解决Vue项目运行时Uncaught Error: [vue-router] invalid mode: [object History]的问题

最新推荐文章于 2025-03-18 19:54:56 发布
最新推荐文章于 2025-03-18 19:54:56 发布
阅读量3.7k 收藏 3
点赞数 14
分类专栏： 前端 Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Angela_Connie/article/details/114631370
版权
本文记录了解决一个Vue项目中出现的[Vue-router] invalid mode: [object History]错误的过程，问题在于配置文件中mode: 'history' 的 'history' 没有正确使用引号标记。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

前两天写项目时，最终运行发现一个奇怪的问题，浏览器报出这样的错误：[vue-router] invalid mode: [object History]，
在这里插入图片描述

根据我们的经验，这应该不是组件创建，引用之类的相关问题，由vue-router可以看出是路由配置的问题，而且错误很明显，是mode:'history’的问题，但是当时脑子不太好使，history忘记加引号，这是一个字符串啊！！！
在这里插入图片描述
问题成功解决！！！

vue+history+iis+webpack 白屏并且提示 Uncaught SyntaxError: Unexpected token
changyandou2020的博客
08-27 415
开发环境下不论是使用hash模式，还是history模式，都可以正常使用。但是当产品编译后发布到测试环境、生产环境的时候，就会出现页面空白，或者指向了iis的默认页面。
Vue3项目按需引入Ant-Design-Vue：解决Uncaught TypeError: Cannot read property ‘prototype‘ of undefined问题！
IT博客-wusheng_z
10-27 1096
Vue3项目按需引入Ant-Design-Vue：解决Uncaught TypeError: Cannot read property ‘prototype‘ of undefined问题！
Uncaught Error: [vue-router] invalid mode: Vue路由配置中模式错误。
mutouaaa的博客
12-15 1779
出现此错误的原因是配置路由时模式配置错误。 vue中关于mode的官方文档如下： 出现此错误很可能是把mode的类型写错了，mode值是字符串类型。 修改后恢复正常。
vue 项目报Uncaught runtime errors: 导致项目崩溃
qq_37550440的博客
09-18 4456
vue 项目报Uncaught runtime errors: 导致项目崩溃,关闭报错
vue3报错：Uncaught runtime errors: × ERROR this.$set is not a function TypeError: this.$set is not a fu
最新发布
肥晨开发的学习之路
03-18 713
欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。中，直接使用 Vue.set 也不再适用，而是推荐使用。或直接修改对象属性来触发响应式更新。数组中的对象属性，而不需要使用。为了修复这个问题，可以直接修改。
vue报错：Uncaught runtime errors: × ERROR ResizeObserver loop completed with undelivered notifications.
肥晨开发的学习之路
02-07 1786
问题：视窗尺寸变化或内容更新时，会频繁触发高度计算，导致 ResizeObserver 循环。欢迎关注我获取前端学习资源，日常分享技术变革，生存法则；行业内幕，洞察先机。el-table 组件使用了动态高度计算。🛠️1.用了动态的判断，导致的报错。
vue遇到的问题（Uncaught runtime errors:ERROR Network Error）
m0_73606449的博客
06-08 3039
代码没错的情况下，可能是因为没打开数据库😓。
vue报错Uncaught runtime errors: × ERROR ResizeObserver loop limit exceeded at handleError (webpack
m0_51312071的博客
05-30 4759
单独使用都不会报错，但是两个结合在一起就产生了奇妙的化学反应。为什么最好不要在el-table外面套弹性布局盒子？使用了el-table组件+弹性布局。解决：修改弹性盒子布局。
vue-cli 打包后提交到线上出现 “Uncaught SyntaxError:Unexpected token” 报错
01-21
前言: 项目使用vue-cli版本2.9.3 ,vue-router使用webpackChunkName实现按需加载. BUG描述:该报错在项目上线一段时间后,有用户反映页面无法正常游览 (后面以问题1/问题2区分) 问题1.导航点击无法正常跳转,console...
Vue-router 报错NavigationDuplicated的解决方法
10-15
主要介绍了Vue-router 报错NavigationDuplicated的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
报错 | vue-router.esm.js?3423:2065 Uncaught (in promise) NavigationDuplicated: Avoided redundant navig
不爱吃菜的菜菜的博客
07-27 2945
在点击同一个跳转路由的时候，点一下并没有报错，但是多点几下就会报错，看了网上的解决办法。但是不知道为什么，求各位大佬解答！
vue报错Uncaught runtime errors: × ERROR Cannot read properties of undefined (reading ‘install‘)的解决办法
weixin_63477921的博客
02-26 1386
下载vue2兼容的vue-router版本npm install vue-router@3.5.2。卸载当前版本的vue-router:npm uninstall vue-router。
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 1019
在vue.config.js中配置关闭Uncaught runtime errors显示。
Uncaught runtime errors: × ERROR Cannot read properties of undefined (reading ‘ vue2&vue-router兼容性问题
lplovewjm的博客
05-20 3592
vue2与vue-router兼容性问题及解决方案。
（Vue_Error）Vue.js_错误解决——Uncaught runtime errors: × ERROR Cannot read properties of undefined (readin
十二_的博客
06-05 4157
这个错误提示意思是在 vue.runtime.esm.js 文件中读取 install 属性时出错，因为该属性所在的对象为 undefined。
【Vue】vue项目中Uncaught runtime errors:怎样关闭
No8g攻城狮的博客
01-19 8324
参考资料：https://webpack.docschina.org/configuration/dev-server/#overlay。的vue项目，出现编译错误或警告时，在浏览器中显示全屏覆盖，如下图，以下是开发环境，此报错在生产环境下并不会出现。当出现编译错误或警告时，被设置了在浏览器中显示全屏覆盖的配置。项目本来运行的好好，换了个新的浏览器，新的。通过看控制台，找到关键词。
vue cli构建的项目出现 Uncaught runtime errors
天问博客-专注于大前端技术
08-30 5418
使用 @vue/cli 脚手架构建的项目，在 npm run dev 运行后，页面出现 Uncaught runtime errors 报错遮罩层，如下图所示。
（Vue_Error）VUE.JS_Errors_Uncaught runtime errors: × ERROR Identifier ‘originalPrompt‘ has already be
十二_的博客
06-06 250
### 反正应该不太影响~~吧。
Vue router history模式,404报错
zhaochao0037的博客
10-14 1014
Vue router history模式,404报错
Uncaught (in promise) Error: Invalid navigation guard vue-router
10-13
这个错误通常是由于 Vue Router 中的导航守卫（navigation guard）出现问题导致的。可能是你的导航守卫函数返回了一个非布尔值，或者你的导航守卫函数中出现了异步操作但没有正确处理 Promise。 你可以检查一下你的...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值