vue-router 路由结构与业务逻辑页面的问题

Question

在使用模块化的方式来配置路由结构的时候,发现一个问题:
业务逻辑(页面的从属关系)和路由结构(影响组件在哪个router-view中渲染)之间有些不匹配.

下面将以segmentfault的移动app应用作为例子来描述这个问题(各位应该都有安装这个app吧).

---

在app中,底部有tab-bar按钮;点击"我的"->"最新动态",将看到"最新动态"的内容列表.
这个内容列表是占全屏的,即底部的tab-bar没有了.

根据上述的业务,配置以下路径:

从业务逻辑上来讲,"最新动态"这个页面应该是属于"我的"这个页面的子页面,所以它的路径为path:'/account/news'.
但是在页面展示上,"最新动态"页面是占全屏的,可以理解为一个新的页面,"news.vue"这个组件必须在"app.vue"中的"router-view"中渲染.因此,在路由结构上,"News"要跟"Main"同级,而不是在"Account"的"children"中作为子路由.

---

引申的问题:
如果是把所有的路由配置统一写在"/router/index.js"中,上述的问题其实不大,但是如果使用模块化的思想,强调父子组件的层级关系,就会出现组件渲染的位置不正确的问题.

以下是在使用模块化的路由配置:

从上图可以看出,"News"这个组件在作为"Account"子路由时,不会被渲染在"app.vue"中的"router-view"中.

---

以上的问题其实还是比较小的,在实际开发过程中,业务逻辑页面会非常多,层级关系又很死,如果不用模块化来整理,会很难受.

不知道各位大大有没有遇到相似的问题,是怎么处理的?

Answer 1

我的解决办法是做了用户行为记录，也就是我都写成同级的路由，没有子路由，我做了两套关系表，一套是用户点击跳转的时候set，一套是业务关系表，就是谁和谁是紧密挨着的关系的，就像看起来可能是父子关系的那种。然后以这种面包屑导航似的方式展示出来。如果都是做父子，业务逻辑很复杂到后期很难维护了，所以就同级了