虽然标题写的是配置路由报错,最终也是通过修改路由解决的,但是导致报错的还有一个主要因素,是因为我增加了一个功能“页面刷新时,根据url高亮左侧导航”,如下图:

1、页面刷新,根据url高亮左侧导航代码如下:

  1. // 刷新页面时根据url高亮左侧导航选项
  2. highLightLeftNav() {
  3. this.firstIndexCur = -1;
  4. this.secondIndexCur = -1;
  5. let pathName = this.$router.history.current.path;
  6. this.customNav.forEach((item, index) => {
  7. if(pathName.indexOf(item.pathUrl) !== -1) {  // 高亮一级导航
  8. this.firstIndexCur = index;
  9. }else if(item.secondLevelNavList.length){
  10. item.secondLevelNavList.forEach((sonItem, sonIndex) => {  // 高亮二级导航
  11. if(pathName.indexOf(sonItem.pathUrl) !== -1) {
  12. this.secondIndexCur = index + ',' + sonIndex;
  13. }
  14. });
  15. }
  16. });
  17. }

(插个题外话,只有一级导航的时候高亮特别简单用 :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]算术表达式组建二叉树,再由二叉树得到算式的后序和中序表达式

    Entry类: package com.hy; import java.io.BufferedReader; import java.io.IOException; import java.io.In ...

  2. js常用遍历汇总

    1, for(let i of Array) for( let i of arr){ console.log(i); } ES6新增的,i代表每次循环Array的值,相当于Array[0]到Array ...

  3. 手动部署 Ceph Mimic 三节点

    目录 文章目录 目录 前文列表 部署拓扑 存储设备拓扑 网络拓扑 基础系统环境 安装 ceph-deploy 半自动化部署工具 部署 MON 部署 Manager 部署 OSD 部署 MDS 部署 R ...

  4. linux系统中vi点击上下左右键后出现ABCD,没有移动光标

    终端(terminal)中输入 vi /etc /vim/vimrc.tiny 在打开的文件中修改 1. 将 set compatible  修改为  set nocompatible 在下一行加入 ...

  5. docker上传私有仓库报错

    docker 1.17 版本搭建私有仓库,上传镜像报错:server gave HTTP response to HTTPS client” 系统环境:centos7docker版本:1.17(注意版 ...

  6. docker遇到防火墙报错问题解决方法

    -- 报错信息[root@localhost docker]# docker run -d -p 5000:5000 training/webapp python app.pycc61442060cb ...

  7. Adobe Acrobat XI 中文版激活方法

    Adobe Acrobat XI不仅只是出色的PDF编辑.转换软件.此次更新深度整合了Microsoft Office套件,实现了PDF与Word.Excel以及PowerPoint等文档间的无缝相互 ...

  8. C学习笔记-结构体

    结构体的定义和初始化 结构体是简单数据类型的综合 struct man { char name[100]; int age; }; struct man m = { "tom", ...

  9. C语言 俄罗斯方块的实现1 全局变量

    目录 全局变量 程序的模块化之MVC 关于俄罗斯方块的代码实现要点 使用数组表示背景和方块 方块表示及其初始化 要让游戏动起来 方块自动下落 全局变量 简而言之,定义在函数外的变量,就是全局变量. 所 ...

  10. 谷歌云SSH开启root密码登陆

    废话不多说,开始教程 1.先选择从浏览器打开ssh连接服务器连接登录成功后,输入以下命令 sudo -i #切换到root passwd #修改密码 然后会要求输入新密码,然后再重复一次密码,输入密码 ...