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

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

clipboard.png

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

clipboard.png

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

问题就是:

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

回答:

不要用组件,用子路由。

  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' }),将隐藏页面替换掉显示页面

回答:

keep-alive?

回答:

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

回答:

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

暂无评论

发表评论

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