虽然标题写的是配置路由报错,最终也是通过修改路由解决的,但是导致报错的还有一个主要因素,是因为我增加了一个功能“页面刷新时,根据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"的更多相关文章

  1. Vue -- 项目报错整理(1):RangeError: Maximum call stack size exceeded

    这几天项目运行报了个错: Uncaught RangeError: Maximum call stack size exceeded,刚开始看到 "returnNodeParameter&q ...

  2. 浏览器JS报错Uncaught RangeError Maximum call stack size exceeded

    JavaScript错误:Uncaught RangeError: Maximum call stack size exceeded 堆栈溢出 原因:有小类到大类的递归查询导致溢出 解决方法思想: A ...

  3. vue报错Error in v-on handler: "RangeError: Maximum call stack size exceeded"

    看下面的报错 错误 看到这个错误一脸懵逼.后面了解到,是因为程序进入了死循环,后面检查了我的代码,原来在这里自己调用自己

  4. 浏览器JS报错Uncaught RangeError: Maximum call stack size exceeded?

    JavaScript错误:Uncaught RangeError: Maximum call stack size exceeded 堆栈溢出 原因:有小类到大类的递归查询导致溢出 解决方法思想: A ...

  5. too much recursion(太多递归)Uncaught RangeError: Maximum call stack size exceeded BootstrapValidator报错

    在BootstrapValidator中已默认遵守Bootstrap规则,form里的每个输入项目必需包含在类为form-group的标签里,否则BootstrapValidator中定义的field ...

  6. npm install报错Unhandled rejection RangeError: Maximum call stack size exceededill install

    故障 在使用npm install下载依赖的时候报错Unhandled rejection RangeError: Maximum call stack size exceededill instal ...

  7. jq ajax请求error: Maximum call stack size exceeded

    原因是data中参数iconUrl这个变量未声明导致的.jq在内部循环时报错

  8. 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  文件中进 ...

  9. 解决 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' }

随机推荐

  1. [Java]用于将链表变成字符串并在元素之间插入分隔符的有用函数“String.join”

    将链表变成字符串并在元素之间插入分隔符,这种动作最常见于组合sql文“select a,b,c from tb”这种场景scenario,其中a,b,c你是存贮在链表中的, 如果要加逗号要么在循环中识 ...

  2. 3709: [PA2014]Bohater

    3709: [PA2014]Bohater 或者:Bohater 题解 好狠啊这个题 z 要开 long long ,可能算掉血回血的时候会爆 long long 吧 首先把能回血的怪打死(不然你后面 ...

  3. Mac 下 Android Studio 连 夜神模拟器 调试

    1.运行夜神模拟器(自行搜索下载) 2.进入资源目录 cd /Applications/Nox\ App\ Player.app/Contents/MacOS 3.执行命令连接 adb connect ...

  4. SSD 页、块、垃圾回收

    基本操作: 读出.写入.擦除: 因为NAND闪存单元的组织结构限制,单独读写一个闪存单元是不可能的.存储单元被组织起来并有着十分特别的属性.要知道这些属性对于为固态硬盘优化数据结构的过程和理解其行为来 ...

  5. 在oracle中使用基表建立月表的存储过程

    某些系统需要按月分表来保存数据.下面的存储过程演示了如何使用基表来建立每个月的月表. 处理思路是:     1:首先,为基表建立好表和对应的索引.     2:将基表保存到一个存储过程需要的表中.   ...

  6. WPF 键盘全局接收消息

    1.========================================================================== 在c#中怎样禁用鼠标左键的使用,其实我们可以通 ...

  7. 安装Redis-cluster-gem install redis报错的解决方案

    错误描述: [root@eshop-cache01 local]# gem install redis ERROR: Loading command: install (LoadError) cann ...

  8. springboot中静态属性/静态方法从YAML(yml)读取配置属性

    启动类添加注解@EnableConfigurationProperties import jnetman.session.SnmpPref; import org.springframework.bo ...

  9. k8s设置集群角色

    查看所有的node节点 [root@test1 ~]# kubectl get nodes NAME STATUS ROLES AGE VERSION test1 Ready <none> ...

  10. 让mysql返回的结果按照传入的id的顺序排序

    比如id为 1,3,5,44,66,32,21,6 那么返回的结果顺序也是这个顺序   $sql = "select * from ".$this->tableName(). ...