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

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

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

首先是 / 路由(第一层路由),该路由组件为一个带有 headerbodyfooter 的三层结构(template),其中在 body 元素内有一个 router-view

clipboard.png

uc 为第二层路由(会员中心),该路由是一个带有 header-subsidebarcontents 的结构,其中在 contents 元素内有一个 router-view 作为动态切换区域。

clipboard.png

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

但是,问题出现了~

clipboard.png

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

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

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

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

验证的可能性有:

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

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

回答:

问题的原因找到了:

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

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

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

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注