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' }
随机推荐
- Python全栈开发第5天作业
作业一:1) 将用户信息数据库文件和组信息数据库文件纵向合并为一个文件/1.txt(覆盖) 2) 将用户信息数据库文件和用户密码数据库文件纵向合并为一个文件/2.txt(追加) 3) 将/1.txt. ...
- ubuntu关于ssh协议登录问题
说明 初始化系统默认不安装ssh如果你想要通过crt等工具连接,你需要手动安装ssh 1.安装ssh工具 使用ubuntu安装的命令sudo apt-get install openssh-serve ...
- CFS理论模型
参考资料:<调度器笔记>Kevin.Liu <Linux kernel development> <深入Linux内核架构> version: 2.6.32.9 下 ...
- SVN服务器的安装
运行VisualSVN-Server-2.7.3.msi程序, 如下图 点击Next, 下一步 选中 I accept选项, 点击Next, 下一步 选择默认配置, 服务和控制台组件方式, 点击Nex ...
- 整型,长整型,无符号整型等 大端和小端(Big endian and Little endian)
一.大端和小端的问题 对于整型.长整型.无符号整型等数据类型,Big endian 认为第一个字节是最高位字节(按照从低地址到高地址的顺序存放数据的高位字节到低位字节):而 Little endian ...
- 数据库CASE 函数 时间用法
select * from warehouse_trade_detail whereb_createtime>= cast('2016-01-01' as date) and b_createt ...
- ts-loader如何与vue单文件组件衔接
.ts-loader是如何与vue单文件组件衔接作用的 https://github.com/microsoft/TypeScript-Vue-Starter https://www.npmjs.co ...
- MySQL 5.7 中文全文检索
MySQL 5.7 中文全文检索 在 MySQL 5.7.6 之前,全文索引只支持英文全文索引,不支持中文全文索引,需要利用分词器把中文段落预处理拆分成单词,然后存入数据库.从 MySQL 5.7.6 ...
- Servlet(4):Session
Session, Cookie及交互 会话(Session)跟踪是Web程序中常用的技术,用来跟踪用户的整个会话.常用的会话跟踪技术是Cookie与Session. Cookie通过在客户端记录信息确 ...
- SqlServer:SqlServer(xpath,字段约束,时间查询,数据文件查询及还原,压缩备份)
1.xpath --1.文档 select @data --2.任意级别是否存在price节点 select @data.exist('//price') --3.获取所有book节点 select ...