虽然标题写的是配置路由报错,最终也是通过修改路由解决的,但是导致报错的还有一个主要因素,是因为我增加了一个功能“页面刷新时,根据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. VMware安装CentOS后无法无法识别网卡的解决方法

    请找到安装CentOS虚拟机的安装目录,找到.vmx后缀名的文件,点击鼠标右键选择用记事本打开,在文件的最后一行添加内容:ethernet0.virtualDev = "e1000" ...

  2. 前端开发中的Error以及异常捕获

    本文首发于公众号:符合预期的CoyPan 写在前面 在前端项目中,由于JavaScript本身是一个弱类型语言,加上浏览器环境的复杂性,网络问题等等,很容易发生错误.做好网页错误监控,不断优化代码,提 ...

  3. openLdap安装教程

    环境 操作系统:centOS 7.0 OpenLDAP:2.4.X 安装 从yum源安装 yum install openldap openldap-servers openldap-clients ...

  4. moby、docker-ce与docker-ee的区别

    近期研究docker相关技术,发现官网分为moby.docker-ce与docker-ee不同板块,ce和ee版本好理解,但2017年开始又多出个Moby,开始有点凌乱,Google出如下解释,mar ...

  5. Golang中基础的命令行模块urfave/cli

    前言相信只要部署过线上服务,都知道启动参数一定是必不可少的,当你在不同的网络.硬件.软件环境下去启动一个服务的时候,总会有一些启动参数是不确定的,这时候就需要通过命令行模块去解析这些参数,urfave ...

  6. CTF—攻防练习之HTTP—命令注入

    主机:192.168.32.152 靶机:192.168.32.167 首先nmap,nikto -host,dirb 探测robots.txt目录下 在/nothing目录中,查看源码发现pass ...

  7. selenium+java+eclipse web项目自动化测试环境搭建

    一.java的安装与环境配置 1.下载JDK(Java Development Kit),下载地址 www.oracle.com 2.安装jdk(傻瓜式安装) 3.安装完成后,配置环境变量,步骤: ( ...

  8. Spring MVC 异步请求 Callable

    对于有的请求业务处理流程可能比较耗时,比如长查询,远程调用等,主线程会被一直占用,而tomcat线程池线程有限,处理量就会下降 servlet3.0以后提供了对异步处理的支持,springmvc封装了 ...

  9. python基础之列表list

    list常用命令:索引/切片:list[index] list[start_index:end_index]增:list.append(obj) list.insert(index,obj) list ...

  10. hdfs(分布式文件系统)优缺点

    hdfs(分布式文件系统) 优点 支持超大文件 支持超大文件.超大文件在这里指的是几百M,几百GB,甚至几TB大小的文件.一般来说hadoop的文件系统会存储TB级别或者PB级别的数据.所以在企业的应 ...