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

    <!DOCTYPE html> H5标准声明,使用 HTML5 doctype,不区分大小写<head lang=”en”> 标准的 lang 属性写法<meta cha ...

  2. js 里面call()的使用

    call 是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向.JavaScript 的一大特点是,函数存在「定义时上下文」和「运行时上下文」 ...

  3. kvm虚拟机操作相关命令及虚拟机和镜像密码修改

    虚拟机生命周期管理 1)查看kvm虚拟机状态 #virsh list --all 2)KVM虚拟机开机 # virsh start oeltest01 3)KVM虚拟机关机或断电 关机 默认情况下vi ...

  4. sptringboot2.0实现aop

    题记:在项目需要对请求日志情形管理. 声明:参考博客https://blog.csdn.net/bombsklk/article/details/79143145 1.在pom.xml中加入依赖 &l ...

  5. 安德鲁1.2Ku全下125C波(CCTV4K除外)

    闲来无事.没事挑战下难度. 前面高楼挡住了,一直没有试过125, 没想到1.2的锅能全下 机器:恐龙机dinobot4K+ 天线:安德鲁1.2ku 接送结果:除4K外所有高清 图片如下

  6. spring boot starter是什么

    参考自:https://www.cnblogs.com/EasonJim/p/7615801.html Spring Boot中Starter是什么 比如我们要在Spring Boot中引入Web M ...

  7. JavaScript(1):Base/Tips

    目录 输出 全局变量 字符串 类型及转换 变量提升 严格模式 表单验证 (1) 输出 <!DOCTYPE html> <html> <body> <p> ...

  8. JavaScript基础入门09

    目录 JavaScript 基础入门09 Event 自定义右键菜单 获取鼠标按键 获取鼠标坐标 获取键盘按键 页面中位置的获取 浏览器的默认行为 冒泡 什么是冒泡 小练习 JavaScript 基础 ...

  9. golang 数据类型之间的转换

    一.基本数据类型之间的转换 1.string到int int,err:=strconv.Atoi(string) 2.string到int64 int64, err := strconv.ParseI ...

  10. flask 框架快速入门

    flask 框架快速入门 搭建一个简易flask项目 首先使用 Pycharm创建flask项目 运行flask项目 1.使用Pycharm搭建flask项目 (如果Pycharm新建项目中未出现该图 ...