应用管理

示例

基础用法

App组件是个应用管理组件,用它可以当做整个单页应用的骨架,用来切换各个子页面,在切换的过程中,组件会展示loading动画来作为过渡。该组件实例化时,需要传入container属性来指明组件的挂载点,然后通过load(Page, [data])方法来记载页面

  1. @param Page 当前要加载的页面组件
  2. @param data 传入组件的数据
  3. @return Promise 返回Promise对象

本例中,我们假设有两个页面PageAPageB,然后通过点击不同的按钮加载不同的页面,实际使用中,可以根据不同的路由来加载不同的页面。

该组件只适用于Intact框架,Vue下无需该组件来管理页面,应该使用vue-router

pageA.vdt
pageA.js
pageB.vdt
pageB.js
index.vdt
index.js
服务器端渲染

App组件还可以管理服务器端渲染,服务器端渲染时,调用render(Page, [data])方法,来将组件渲染成字符串,参数与load方法一样。然后前端进行加载时,需要在实例化App时传入ssr: true来标明当前页面为服务器端渲染,首次加载时进行混合hydrate

本例中,点击Render in server来模拟PageA服务器端渲染结果,插入container下面,然后点击PageA来混合结果,可以看到混合时,页面并不会发生任何改变

pageA.vdt
pageA.js
pageB.vdt
pageB.js
index.vdt
index.js

属性

属性 说明 类型 默认值
view 当前要展示的Intact组件实例 Intact undefined
container 当前应用的挂载点 HtmlElement undefined
loading 展示或隐藏loading动画 Boolean false
ssr 当前应用是否进行了服务器端渲染,如果为true,则首次加载时,前端会进行混合hydrate Boolean false

扩展点

名称 说明
loading 自定义页面加载动画,可以通过继承App组件扩展

方法

方法名 说明 参数 返回值
showLoading 展示loading动画 - undefined
hideLoading 隐藏loading动画 - undefined
load 加载页面组件 Page, data Promise
render 服务器端渲染,将组件渲染成字符串 Page, data Promise[String]