vue报以下错误可能原因

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue报以下错误可能原因相关的知识,希望对你有一定的参考价值。

参考技术A vue项目报错如下:Property or method "hasReportChooseTabIndex" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

可能是页面script标签没有配对或者某些标签没有配对导致

Vue-router 报NavigationDuplicated的可能解决方案

出现这个问题,控制台会报[NavigationDuplicated {_name: "NavigationDuplicated", name: "NavigationDuplicated"}]。其原因在于Vue-router在3.1之后把$router.push()方法改为了Promise。所以假如没有回调函数,错误信息就会交给全局的路由错误处理,因此就会报上述的错误。

如果你仔细观察并复现了多次错误你会发现,vue-router是先报了一个Uncaught (in promise)的错误(因为push没加回调),然后再点击路由的时候才会触发NavigationDuplicated的错误(路由出现的错误,全局错误处理打印了出来)。

解决方案

方案1

固定vue-router版本到3.0.7以下。这个方案没什么说的,就是简单粗暴,没有任何理由。但是你能确保以后不升级vue-router吗?

方案2

禁止全局路由错误处理打印,这个也是vue-router开发者给出的解决方案:

import Router from ‘vue-router‘

const originalPush = Router.prototype.push
Router.prototype.push = function push(location, onResolve, onReject) {
  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
  return originalPush.call(this, location).catch(err => err)
}

把这段代码放在引入vue-router之后就行,一般在main.js里,如果你的路由单独抽取出来了,那可能在其他的路由文件中。

方案3(高成本高收益)

vue-router的开发者也给出了解决方法,你需要为每个router.push增加回调函数。

router.push(‘/location‘).catch(err => {err})

对于我们来说这个解决方案的成本可能很高,但是是值得的。在vue-router 3.1版本之前的push调用时不会返回任何信息,假如push之后路由出现了问题也不会有任何的错误信息。如果你使用方案1固定了vue-router的版本,那么以后的项目需要路由的回调时你根本无从下手。

方案4

如果你使用了Element-UI,并且方案2无法解决你的问题。那么你只能用方案1来固定你的vue-router版本了。这是因为Element-UI的el-menu在重复点击路由的时候报的错误,而且这个错误是Element-UI内部的路由问题,你无法通过方案2和3去解决。只能选择暂时不升级Vue-router。

好消息是Element-UI已经有了解决方案,预计在2.13.0版本会解决这个问题。参考Github上issue#17269。

参考文章

No stacktrace on NavigationDuplicated error #2881

[Bug Report] 升级vue-router至3.1以后版本,导航组件重复点击报错 NavigationDuplicated #17044

Menu: fix router NavigationDuplicated error when using vue-router@^3.1.0 #17269


以上是关于vue报以下错误可能原因的主要内容,如果未能解决你的问题,请参考以下文章

Vue-router 报NavigationDuplicated的可能解决方案

Font Awesome 不能在 Router Link Vue.js 中工作(可能的 Vue-Router 错误)

IDEA编译报语法错误? 可能是默认机制搞的鬼!

vue 项目白屏解决方案

Oracle中可能导致以下错误的可能原因是什么?

vue先加载数据再渲染