子页面

技术点

返回操作只关闭子页面 滚动穿透 组件插槽 内容高度计算

介绍

子页面原理和 drawer 抽屉组件相似，只是将抽屉组件以新页面路由的形式打开，这样有两个优点：

• 页面刷新时能保持子页面不会像抽屉组件一样被收起
• 浏览器返回上一页时（移动端物理按键返回上一页等），只关闭当前子页面，而不是关闭子页面并返回上一页。

页面分解

使用子页面效果示例

注意事项

移动端滚动事件存在滚动穿透问题，所以子页面中会调用在 util 中定义阻止页面滚动的方法。

mounted() {
    this.$preventScroll(true);
},

beforeDestroy() {
    this.$preventScroll(false);
},