vue路由跳转能保存原页面吗

Question

在用vue模仿网易云音乐App时发现个问题：

这个页面的左上角的按钮是个人信息栏的现隐按钮，点击之后的效果如下

可以看到原页面的内容虽然加了遮罩，但都是可以看到的。

问题就是：

我现在是写成父子组件通讯，实现子组件的现隐，但这就有个问题就是，浏览器返回就无法控制子组件的现隐；  
而我也之前尝试过子组件的现隐通过路由来控制，但是页面的跳转无法保留原页面内容（图2的红框部分）。
所以有什么方法可以实现，既可以保留原页面内容又可以通过路由返回控制子组件。

Answer 1

不要用组件，用子路由。

1. 准备工作， 假设你第一张图的页面是 /main ，在他的 children 里设置两个子路由页面
   1.1. /main/sideBar 页面内容就是你第二张图的侧边栏
   1.2. /main/main 一个空页面，宽高为0，背景透明
2. 在 /main 主页添加 <router-view></router-view>
3. 需要显示的时候，判断当前路由，需要显示时$router.push({ path: '/main/sideBar' }),不显示时，$router.push({ path: '/main/main' })
4. 在这种情况下，通过前进后退可以控制显隐。

个人建议: 按正常的交互，应该是后退,前进 可隐藏但显示，需要这种效果可以用$router.replace({ path: '/main/main' }),将隐藏页面替换掉显示页面

Answer 2

keep-alive?

Answer 3

Router 在定义的时候，是否以 tree 的形式进行拓扑？
根组件由多个 router-view，menu、topbar、content 分别放在不同的 router-view 中，在 root 组件中控制 menu 的返回和跳转，就可以实现 route 来控制每个状态了。

Answer 4

写成公用组件，显示隐藏状态通过vuex统一控制。