Vue.js 路由嵌套出现错误，部分页面会出现循环嵌套，刷新后可正常显示

Question

项目中使用 vue-router 的嵌套路由实现类似 “Layout” 的功能，具体设计如下：

访问地址如：http://0.0.0.0:8080/uc/member/index/index

首先是 / 路由（第一层路由），该路由组件为一个带有 header、body、footer 的三层结构(template)，其中在 body 元素内有一个 router-view。

uc 为第二层路由（会员中心），该路由是一个带有 header-sub、sidebar 和 contents 的结构，其中在 contents 元素内有一个 router-view 作为动态切换区域。

当我访问 http://0.0.0.0:8080/uc/member/index/index 的时候，实际的路由进行了 4 连跳，/uc -> /uc/member -> /uc/member/index - /uc/member/index/index。

但是，问题出现了~

这种问题是随机性的，有些界面会出现，有些界面不会出现，而且，大部分情况下，刷新页面即可恢复正常显示。

.sidebar 中存放着一个菜单，使用 router-link 跳转页面，但只要其中的某个页面出现显示错误，则其他的页面也会跟着出现错误（哪怕刚刚还是正常显示的）！

uc 下面划分了 member、wallet 和 agent 三个子模块，在 .header-sub 中一个导航可切换，.sidebar 中的菜单可根据三个子模块显示不同的菜单，但，只有 member 中的页面会出现上述问题，其他两个模块中的页面均不存在该问题。

整个项目使用 Vue cli 构建，大概有几十个页面，可复用组件页差不多有几十个，使用 axios 请求数据。

验证的可能性有：

• 网络延迟：尝试在页面渲染完后再加载数据，但问题仍未解决；
• 错误的路由语法：把每个层级的根路由设置为 ` 或 /`，仍未解决问题；
• 超过 3 层路由显示不正常，嗯，我遇到的就是这个问题，但怎样解决呢？

请问诸位大神，还有没有遇到类似问题的，怎样解决？

Answer 1

问题的原因找到了：

• 首先是要排除代码中的基本警告和错误，确保基本的逻辑运行；
• 然后就是检查代码有无 死循环 或 递归导致的栈溢出；

我的代码是因为存在 递归导致的栈溢出，进而导致视图布局出错。我的项目中存在一个侧边菜单，我使用当前路由对象的 matched 数组进行菜单比对，结果导致了栈溢出。

最终的解决办法是：在比对菜单的时候优先比对路径(path)，如果路径一致，则继续比对参数(query)，修改后的代码仅有10几次循环操作，页面在没出现嵌套出错的情况了。类似查找某人，先排除姓、再排除名，最后确认性别，逐渐缩小循环的层级。