vue动态添加路由/设置路由权限next({ ...to , replace: true })报错

159 阅读1分钟

手上项目的路由是根据角色权限动态加载的,不一样的角色显示不一样的路由。但是退出登录后重新登陆会有报错

image.png

众所周知这个报错大致是说堆栈溢出,一般出现在递归了之类的死循环中,按理说这里不应该出现的。刚开始我以为是因为没有清除路由的问题,于是登录前专门重置了一次路由,但是无效。后来打印了数据发现了原因。

image.png

我在添加完成路由后使用next({ ...to ,replace: true })的方法作为路由出口。但是因为不同的账号角色权限不同.因此 “to”对象也不同。a账号权限可能有“department”这个路由,但是b账号可能就没有,因此,在next的时候,当前路由列表无法找到“department”路由,next就一直重复查找,最后导致死循环。

这次主要的问题就是next()导致的。next()不带参数就单纯的是一个出口;一旦携带参数,next()就像被重载一样,意义就完全不同。next({ ...to })就代表路由会将to对象路由作为出口,在路由里查找,没找到,就会一遍一遍执行拦截。所以,如果有碰到类似的问题,不妨看看你的出口路由在不在你的路由表里。

ps:next()后续会专门详细写个文章,也提醒下自己。