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

Question

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

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

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

问题就是：

我现在是写成父子组件通讯，实现子组件的现隐，但这就有个问题就是，浏览器返回就无法控制子组件的现隐；  

而我也之前尝试过子组件的现隐通过路由来控制，但是页面的跳转无法保留原页面内容（图2的红框部分）。

所以有什么方法可以实现，既可以保留原页面内容又可以通过路由返回控制子组件。

Answer 1

不要用组件，用子路由。准备工作， 假设你第一张图的页面是&nbsp;/main&nbsp;，在他的&nbsp;children&nbsp;里设置两个子路由页面1.1.&nbsp;/main/sideBar&nbsp;页面内容就是你第二张图的侧边栏1.2.&nbsp;/main/main&nbsp;一个空页面，宽高为0，背景透明在&nbsp;/main&nbsp;主页添加&nbsp;<router-view></router-view>需要显示的时候，判断当前路由，需要显示时$router.push({ path: '/main/sideBar' }),不显示时，$router.push({ path: '/main/main' })在这种情况下，通过前进后退可以控制显隐。个人建议: 按正常的交互，应该是后退,前进 可隐藏但显示，需要这种效果可以用$router.replace({ path: '/main/main' }),将隐藏页面替换掉显示页面

Answer 2

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