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，一套是业务关系表，就是谁和谁是紧密挨着的关系的，就像看起来可能是父子关系的那种。
然后以这种面包屑导航似的方式展示出来。
如果都是做父子，业务逻辑很复杂到后期很难维护了，所以就同级了

Answer 2

嵌套路由文档
文档中显示：

父组件路由匹配成功，子组件自动在地址中添加了父组件的路由前缀。

也就是在New.js中的path改为path:'/news'

Answer 3

也碰到这样的问题
最后的解决方案是
index.vue 里也有一个route-view
news.vue 是悬浮全屏

{
    position:fixed;
    left: 0;
    right: 0;
    top:0;
    bottom：0；
    overflow: hidden;
}

切换特效根据具体业务而定

Answer 4

解决的问题：子页面显示

用dom结构去控制父子页面，子页面加载后，viewports~div 就隐藏

<style lang="sass">
    .viewports
         // 子页面
         .viewports
         // 父页面
         .viewports ~ div
             display: none   
</style>
         
<!-- a.vue -->
<div class="viewports">
    <!-- b.vue -->
    <router-view></router-view>
    
    <div class="main">
    </div>
</div>

<!-- b.vue -->
<div class="viewports"></div>