前端项目开发踩坑02————Vue-Router 栈溢出报错

提示：
本文为js栏目：前端项目开发踩坑02————Vue

---

前言

现在的CMS后台项目中流行使用动态路由加载。即通过后端保存当前用户的路有权限，在页面加载时通过获取该用户的路由列表，动态渲染加载至页面中。而非在项目开发阶段，使用静态文件编辑路由列表，同时加载到项目中。（router.js）

第一次接触这样的写法，遇到了许许多多奇奇怪怪且不好排除的bug。

其中最经典的报错就是：
Error in render: “RangeError: Maximum call stack size exceeded”

真恶心啊，这个bug。因为根本想不到到底是哪里出问题了。

---

提示：以下是本篇文章正文内容，下面成功案例可供参考 以Vue + Vue-Router + element ui 为例

element UI的router-link组件指向未加载路由

先放解决方案。将所有router-link组件全部改成，利用事件调用函数跳转。
如：

<router-link to="/changePassWord">
  <el-dropdown-item>修改密码</el-dropdown-item>
</router-link>

改成：
Vue项目：

 <el-dropdown-item @click.native="$router.push('/changePassWord')">修改密码</el-dropdown-item>

动态路由加载函数出错

动态路由加载函数中一般先同步获取该用户的路有权限，可以是从浏览器本地缓存中获取，可以是从后端获取。

但是通常获取的路由权限可能是多级数组。

位次你讲深度遍历该数组，切记检查你的函数写法，代码中不要出现死循环。

未配置即将跳转的路由

你在路由器前置守卫的处理中，可能对即将跳转的路由进行重定向。

例如，当欲访问页面不存在时，跳转404页面。

当当前用户没有权限时，跳转401页面。

当router捕获不到重定向页面时就会报错。

所以除了动态路由获取以外，你还需要讲一些必然存在的路由，进行静态处理，router.js