> B站免费视频:[CabloyJS全栈框架:从入门到精通:017 页面结构与页面打开方式](https://www.bilibili.com/video/BV1d34y1J7kS/?vd_source=8a2b870d6d5dc83f8f4b973c95613fd8)
## 基础构件:view/page
不论是`mobile布局`还是`pc布局`都由`view/page`构成。换句话说,`view/page`是实现pc=mobile+pad自适应布局的基石
### 1. Framework7的策略
`view/page`是由Framework7组件库引入的概念。一个`view`就代表了一个视图容器,一个`view`可以包含多个`page`,这些`page`在`view`容器当中采用堆叠的机制,从而可以轻松实现手机端页面前进与后退的操作
> 关键问题:实现手机端页面前进与后退,核心要考虑的是历史页面组件`如何保持状态`,又`何时销毁`?
Framework7内置了一个`router路由库`,通过page的堆叠机制轻松实现page页面的状态保持和销毁
* [Framework7 Page](https://v5.framework7.io/docs/page)
* [Framework7 View/Router](https://v5.framework7.io/docs/view)
有网友可能会说,使用`vue router`+`keep-alive`也可以实现这种机制。不是不可以,而是非常繁琐,不直观
* 具体分析,请参见:[vue的keep-alive非常实用,为什么angular和react都不跟进呢?](https://www.zhihu.com/question/456149654/answer/1855148235)
### 2. CabloyJS的改造优化
由此可见,Framework7是为开发原生mobile端应用量身定做的UI组件库。CabloyJS为了将Framework7在mobile端的交互体验和开发模式移入pc端,对`view/page`组件分别进行了改造和优化。比如,在Framework7中,`view/page`对应的vue组件分别是`f7-view/f7-page`,而在CabloyJS中对应的vue组件分别是`eb-view/eb-page`
> eb前缀代表egg-born,egg-born是CabloyJS框架的第一阶段,提供最基础的架构设计
## 页面结构
### 1. mobile布局
* 主页面:由多个`tab页签`构成,每一个页签是一个`view`容器
* 弹出页面:当在`tab页签`中点击链接时,将弹出页面。弹出页面可以是一个或者多个`view`容器进行堆叠显示
### 2. pc布局
* 侧边栏:一个`边栏面板`就是一个`view`容器
* 内容区域
* tab页签:`内容区域`由多个`tab页签`构成
* group:一个`tab页签`对应一个`group`。一个`group`包含多个`view`容器
* 展开模式(tile):在展开模式中,多个`view`容器依次向右平铺展开
* 弹出模式(popup):在弹出模式中,`第一个view`容器铺满页面空间,`剩余view`容器参照`mobile布局`的`弹出页面`堆叠显示
## 页面尺寸
页面尺寸有三种类型:`small`、`medium`、`large`,默认是`small`
### - 指定页面尺寸
可通过页面组件的`meta`元数据指定页面尺寸
``` javascript
```
## 页面标题
模块`a-layoutpc`会自动提取页面组件中`eb-navbar`元素的`title`属性,然后显示在头部导航栏中
当然也可通过页面组件的`meta`元数据指定页面标题
``` javascript
```
## 页面打开方式
可以通过方法`$view.navigate`传递`target`属性,指定页面打开方式
``` javascript
this.$view.navigate('/test/party/kitchen-sink/about', { target: '_self' });
```
* target
| 名称 | 说明 |
|----|----|
| 空 | 自动判断:弹出式:在弹出窗口中打开,展开式:依次在右侧使用新`view`展开 |
| \_self | 在当前`view`中打开 |
| \_view | 在新`view`中打开 |
| \_group | 在新`group`中打开 |
| \_popup | 在弹出窗口中打开 |
## 侧边栏页面显示
还可以通过方法`$view.navigate`在侧边栏面板当中打开页面。比如,在右边栏面板打开dashboard的配置页面,代码如下:
``` javascript
onPerformSettings() {
this.$view.navigate(`/a/dashboard/dashboard/settings?dashboardUserId=${this.dashboardUserId}`, {
scene: 'sidebar',
sceneOptions: { side: 'right', name: 'profile', title: 'Profile2' },
context: {
params: {
dashboard: this,
},
},
});
},
```
| 名称 | 说明 |
|----|----|
| scene | 指定为sidebar |
| sceneOptions | 边栏选项 |
| context | 传入新页面的环境参数 |
* sceneOptions
| 名称 | 说明 |
|----|----|
| side | 指定哪个边栏,可选项:`left/right/bottom` |
| name | 边栏面板的名称 |
| title | 边栏面板的标题,支持国际化 |
* context:通过context既可以向新页面传入参数,也可以从新页面返回结果数据
* 参见:[页面传参与返回值](https://cabloy.com/zh-cn/articles/e93b1c46b69a4012aa6987a41b6dd9e7.html)