# 页面间交互
#### 操作场景
页面间交互是指在不同页面中，进行的相互跳转动作。可跳转同一项目中的任一页面，或跳转外部页面。在跳转项目内部页面时，用户可设置跳转携带相关参数。
#### 同项目不同页面之间的跳转
当项目场景较多，一屏无法完全涵盖所有内容或需要额外查询时，为了性能考虑，通常会采取传递参数在另外的页面进行查询后，在当前页面展现，这时就需要在同项目中不同页面间来回跳转。
例如，新建三个页面（页面一、页面二和页面三），向页面一（默认主页）中拖入玫瑰花饼图和基本饼图，向页面二中拖入多区域折线图并发布，向页面三中拖入基本柱图并发布。
1. 参考[创建大屏\&PC端项目](https://support.huaweicloud.com/usermanual-astrocanvas/astrocanvas_05_6011.html)中操作，新建一个大屏项目，如页面间交互。
2. 参考[使用空白画布新建页面](https://support.huaweicloud.com/usermanual-astrocanvas/astrocanvas_05_6014.html)中操作，新建一个空白页面，如页面一，并拖入玫瑰花饼图和基本饼图。
   
   图1页面一   
   ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158426001.png "点击放大")
   
   
3. 单击![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002123286424.png)，保存页面后单击![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158647493.png)，发布页面。
4. 参考上述操作，新建页面二和页面三，分别拖入多区域折线图和基本柱图，并发布。 
   图2页面二   
   ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158307565.png "点击放大")
   图3页面三   
   ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002123185992.png "点击放大")
   
   
5. 在页面一中，选中玫瑰花饼图，单击组件上方的![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002148213325.png)，设置玫瑰花饼图和页面二之间的交互。
   
   图4与页面二之间的交互   
   ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158307609.png "点击放大")
   - 页面类型：选择待跳转页面的类型，支持选择本项目内页面或外部页面。
   
   - 内部页面：选择待跳转的具体页面。"页面类型"设置为"内部页面"时，才显示该配置。
   
   - 外部页面地址：选择待跳转的外部页面地址，可以直接输入地址，也可以设置为全局变量。"页面类型"设置为"外部页面"时，才显示该配置。
   
   - 页面打开方式：设置跳转页面的打开方式，如新窗口、当前窗口或弹窗。设置为弹窗时，可指定弹窗的高度和宽度。本示例设置为弹窗，并设置弹窗的高度和宽度为50%。
   
   - 设置页面参数：支持设置为"固定参数"和"变量参数"，设置为"变量参数"时，参数值可以设置为全局变量。设置后，跳转页面的地址中会带上此处设置的参数，格式为"跳转页面URL?参数名=参数值"。
     图5设置为固定参数   
     ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002123027848.png)
     图6设置为变量参数   
     ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002123027828.png)
     图7跳转页面地址中会带上设置的参数   
     ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158307557.png "点击放大") 
   
   
   
   
6. 在页面一中，选中基本饼图，单击组件上方的![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002148213325.png)，设置基本饼图和页面三之间的交互。
   
   图8与页面三之间的交互   
   ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158426029.png "点击放大")
   
   
7. 单击![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002123286424.png)，保存页面后单击![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158647057.png)，预览效果。
   
   图9单击玫瑰花饼图弹出页面二   
   ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158425993.png "点击放大")
   图10单击基本饼图弹出页面三   
   ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002123027876.png "点击放大")
   
   
 
#### 跳转外部页面
外部页面跳转和项目内部页面跳转类似，只是交互动作的选择项不同，同时需要填入外部页面的链接地址。
1. 参考[创建大屏\&PC端项目](https://support.huaweicloud.com/usermanual-astrocanvas/astrocanvas_05_6011.html)中操作，新建一个大屏项目，如页面间交互。
2. 参考[使用空白画布新建页面](https://support.huaweicloud.com/usermanual-astrocanvas/astrocanvas_05_6014.html)中操作，新建一个空白页面，并拖入玫瑰花饼图。
3. 选中玫瑰花饼图，单击组件上方的![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002148213325.png "点击放大")，进入交互设置页面。
4. 设置本页面与外部页面之间的跳转。 
   图11设置与外部交互的页面   
   ![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002123027808.png "点击放大")
   - **外部页面由于同源策略限制，暂不支持弹窗打开。**
   
   - **在填写外部页面地址时，需要将"http://"或"https://"请求头也一并填入。**
   
   
   
   
5. 单击![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002123286424.png)，保存页面后单击![](https://support.huaweicloud.com/usermanual-astrocanvas/zh-cn_image_0000002158647057.png)，预览效果。