更新时间:2024-07-03 GMT+08:00
分享

页面管理

页面管理插件可以管理该应用下的全部页面,可以新增页面,可以新增文件夹,以及对页面或者文件的增删改操作。

假如有一个前端工程:

- project   
   - views     
     |_ Index.vue      
      - Page2.vue     
     - TodoFolder       
       |_ Todo.vue 

设计器的页面概念就相当于上述工程中的一个页面或者文件夹,每个页面有对应的路由,您可以根据路由访问对应的页面。

新增文件夹

  1. 参考登录AstroPro界面中操作,登录AstroPro界面。
  2. 在左侧导航栏中,选择“前端应用”
  3. 单击应用模块内的“应用开发”,进入设计器。
  4. 在左侧插件栏中,单击,进入“页面管理”页面。
  5. 单击“页面管理”的新增文件夹按钮。
  6. 设置基本属性,如输入文件夹ID及设置路由。

    图1 创建文件夹

  7. 单击“保存”,完成文件夹创建。

删除文件夹

删除文件夹前,请确保文件夹为空,删除文件夹中的页面,具体操作请参考删除页面

  1. 参考登录AstroPro界面中操作,登录AstroPro界面。
  2. 在左侧导航栏中,选择“前端应用”
  3. 单击应用模块内的“应用开发”,进入设计器。
  4. 在左侧插件栏中,单击,进入“页面管理”页面。
  5. 单击,进入页面设置页面。
  6. 单击

    图2 删除文件夹

  7. 在弹框中,单击“确定”,完成文件夹删除。

新增页面

  1. 参考登录AstroPro界面中操作,登录AstroPro界面。
  2. 在左侧导航栏中,选择“前端应用”
  3. 单击应用模块内的“应用开发”,进入设计器。
  4. 在左侧插件栏中,单击,进入“页面管理”页面。
  5. 单击“页面管理”的新增页面按钮。
  6. 设置页面基本属性。

    • 选择页面类型:可选“静态页面”或“公共页面”。
    • 页面名称:只允许包含英文字母,且以大写开头驼峰格式,如DemoPage。
    • 选择文件夹:下拉框中选择文件夹名称。
    • 路由:输入路由信息,只允许包含英文字母、数字、下划线、中划线和正斜杠组成, 且以英文字母开头。
    图3 创建文件夹

  7. (可选)设置输入输出配置。

    • 输入配置:传递给页面的参数(类似组件的输入属性)。
    • 输出配置:页面传递出的事件(类似组件触发的输出事件)。
    • 根元素设置:开启后设置根元素为Body,默认为div。

  8. (可选)页面生命周期配置。

    1. 单击“添加页面生命周期”。
    2. 选择生命周期函数,例如onMounted、setUp、onUpdated等。
      周期函数详细说明可参考生命周期选项
      图4 添加页面生命周期
    3. 编写生命周期函数,单击“确定”。
      图5 编写生命周期函数

  9. 单击“保存”
  10. 在弹框中输入历史备份信息,单击“确定”,完成文件夹创建。

复制页面

  1. 参考登录AstroPro界面中操作,登录AstroPro界面。
  2. 在左侧导航栏中,选择“前端应用”
  3. 单击应用模块内的“应用开发”,进入设计器。
  4. 在左侧插件栏中,单击,进入“页面管理”页面。
  5. 鼠标悬浮在待复制的页面名称上,将显示设置按钮。
  6. 单击,进入页面设置页面。
  7. 单击,修改页面ID及路由配置。

    图6 创建文件夹

  8. 单击“保存”。
  9. 在弹框中输入历史备份信息,单击“确定”,完成页面复制。

还原页面历史记录

  1. 参考登录AstroPro界面中操作,登录AstroPro界面。
  2. 在左侧导航栏中,选择“前端应用”
  3. 单击应用模块内的“应用开发”,进入设计器。
  4. 在左侧插件栏中,单击,进入“页面管理”页面。
  5. 鼠标悬浮在待复制的页面名称上,将显示设置按钮。
  6. 单击,进入页面设置页面。
  7. 鼠标悬浮在待恢复的历史备份记录上,将显示操作按钮。
  8. 单击“还原”。

    图7 删除页面

  9. 在弹框中,单击“确定”,完成页面历史记录还原。

删除页面

  1. 参考登录AstroPro界面中操作,登录AstroPro界面。
  2. 在左侧导航栏中,选择“前端应用”
  3. 单击应用模块内的“应用开发”,进入设计器。
  4. 在左侧插件栏中,单击,进入“页面管理”页面。
  5. 鼠标悬浮在待复制的页面名称上,将显示设置按钮。
  6. 单击,进入页面设置页面。
  7. 单击

    图8 删除页面

  8. 在弹框中,单击“确定”,完成页面删除。

设置主页

主页就是整个应用的home页面,我们可以在页面管理中配置主页(即path为 “/” 时渲染的页面)。

  1. 参考登录AstroPro界面中操作,登录AstroPro界面。
  2. 在左侧导航栏中,选择“前端应用”
  3. 单击应用模块内的“应用开发”,进入设计器。
  4. 在左侧插件栏中,单击,进入“页面管理”页面。
  5. 鼠标悬浮在待复制的页面名称上,将显示设置按钮。
  6. 单击,进入页面设置页面。
  7. 在基本设置页签下,勾选“设为主页”。

    图9 设置主页

  8. 在弹框中,单击“确定”,完成主页设置。
分享:

    相关文档

    相关产品