vue配置路由时报错 Error in render: "RangeError: Maximum call stack size exceeded"
虽然标题写的是配置路由报错,最终也是通过修改路由解决的,但是导致报错的还有一个主要因素,是因为我增加了一个功能“页面刷新时,根据url高亮左侧导航”,如下图:
1、页面刷新,根据url高亮左侧导航代码如下:
// 刷新页面时根据url高亮左侧导航选项
highLightLeftNav() {
this.firstIndexCur = -1;
this.secondIndexCur = -1;
let pathName = this.$router.history.current.path;
this.customNav.forEach((item, index) => {
if(pathName.indexOf(item.pathUrl) !== -1) { // 高亮一级导航
this.firstIndexCur = index;
}else if(item.secondLevelNavList.length){
item.secondLevelNavList.forEach((sonItem, sonIndex) => { // 高亮二级导航
if(pathName.indexOf(sonItem.pathUrl) !== -1) {
this.secondIndexCur = index + ',' + sonIndex;
}
});
}
});
}
(插个题外话,只有一级导航的时候高亮特别简单用 :class=' { "active" ? currentIndex == index } ' 即可实现,而二级导航的时候就比较复杂了,具体如何实现可以看我的另一篇博客:vue高亮一级、二级导航)
转回正题,看一下路由部分的代码
2、路由部分代码
个人理解之所以报错就是因为页面挂载完毕,如果按照配置路由选项默认高亮第一个,而按照①中刷新页面高亮某个导航就不定了,此时既要高亮第一个,又要高亮其他的就会报错
vue配置路由时报错 Error in render: "RangeError: Maximum call stack size exceeded"的更多相关文章
- Vue -- 项目报错整理(1):RangeError: Maximum call stack size exceeded
这几天项目运行报了个错: Uncaught RangeError: Maximum call stack size exceeded,刚开始看到 "returnNodeParameter&q ...
- 浏览器JS报错Uncaught RangeError Maximum call stack size exceeded
JavaScript错误:Uncaught RangeError: Maximum call stack size exceeded 堆栈溢出 原因:有小类到大类的递归查询导致溢出 解决方法思想: A ...
- vue报错Error in v-on handler: "RangeError: Maximum call stack size exceeded"
看下面的报错 错误 看到这个错误一脸懵逼.后面了解到,是因为程序进入了死循环,后面检查了我的代码,原来在这里自己调用自己
- 浏览器JS报错Uncaught RangeError: Maximum call stack size exceeded?
JavaScript错误:Uncaught RangeError: Maximum call stack size exceeded 堆栈溢出 原因:有小类到大类的递归查询导致溢出 解决方法思想: A ...
- too much recursion(太多递归)Uncaught RangeError: Maximum call stack size exceeded BootstrapValidator报错
在BootstrapValidator中已默认遵守Bootstrap规则,form里的每个输入项目必需包含在类为form-group的标签里,否则BootstrapValidator中定义的field ...
- npm install报错Unhandled rejection RangeError: Maximum call stack size exceededill install
故障 在使用npm install下载依赖的时候报错Unhandled rejection RangeError: Maximum call stack size exceededill instal ...
- jq ajax请求error: Maximum call stack size exceeded
原因是data中参数iconUrl这个变量未声明导致的.jq在内部循环时报错
- vue 使用 element-ui 时报错ERROR in ./node_modules/element-ui/lib/theme-chalk/fonts/element-icons.ttf
在vue项目中引用 element-ui 时,虽然按照 element-ui 的官方文档一步步操作,还是产生了下面的错误 解决这个问题的方法,就是在 web pack.config.js 文件中进 ...
- 解决 vue 使用 element 时报错ERROR in ./node_modules/element-ui/lib/theme-chalk/fonts/element-icons.ttf
在 webpack.config.js 中加入这个依赖 { test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/, loader: 'file-loader' }
随机推荐
- linux目录简介说明
- C++学习 之 初识命名空间
声明: 本人自学C++, 没有计算机基础,在学习的过程难免会出现理解错误,出现风马牛不相及的现象,甚至有可能会贻笑大方. 如果有幸C++大牛能够扫到本人的博客,诚心希望大牛能给予 ...
- JDBC接口核心的API
java.sql.* 和 javax.sql.* Driver接口: 表示java驱动程序接口.所有的具体的数据库厂商要来实现此接口. |- connect(url, properties): ...
- 使用sql developer 导出Oracle数据库中的表结构
MS SQLServer的客户端工具做的的确比较好,直接右键,导出数据库就OK了,而且MS的客户端导出的是xxx.dbf文件,直接附加到别的数据库上就OK了 Oracle的sql developer就 ...
- jq 点击除了某元素以外的其他所有元素
$('body').click(function(e){ if(($(e.target).attr('class')!='header-top-nav-ipt')){ alert('除了class=h ...
- 奶牛渡河(dp)
奶牛渡河 时间限制: 1 Sec 内存限制: 128 MB提交: 36 解决: 27[提交][状态][讨论版][命题人:外部导入][Edit] [TestData] [同步数据] 题目描述 Far ...
- "首页添加至购物车,TabBar显示购物车的数量"实现
今天学习别人的项目源码的时候,看到这样的一种实现功能:首页添加至购物车,TabBar显示购物车的数量....想到以前没有做过,这里学习了,记录一下: 实现的效果图如下: 当点击首页添加至购物的操作的时 ...
- k8s1.11.0安装、一个master、一个node、查看node名称是ip、node是扩容进来的、带cadvisor监控服务
一个master.一个node.查看node节点是ip # 安装顺序:先在test1 上安装完必要组件后,就开始在 test2 上单独安装node组件,实现node功能,再返回来配置test1加入集群 ...
- Asp.Net Core 反向工程
反向工程1.反向工程是实体类型类和一个基于数据库架构的 DbContext 类的基架的过程2.Scaffold-DbContext(数据库上下文脚手架) 使用Scaffold-DbContext ...
- jvm的学习笔记:二、类的初始化,代码实战(4)
当接口被初始化的时候,不要求其父类被初始化 System.out.println(MyChild5.c); 输出: MyChild5 1 依据:new Random().nextInt(3)并非编译区 ...