All Products
Search
Document Center

Page

Last Updated: May 25, 2021

Page is a Webview logical abstraction layer and also the root node for component mounting.

Code import

 
  1. import { Page } from '@ali/kylin-framework';

Page declaration structure

The API contained in a Page is declared in Page Interface and provides complete control capabilities of Vue instances. The following shows a simple Page usage. initOptions is responsible for processing additional Vue configuration options.

 
  1. import { Page } from '@ali/kylin-framework';
  2. import IndexComponent from './indexComponent.vue';
  3. class IndexPage extends Page {
  4. initOptions() {
  5. return {}
  6. }
  7. render(h) {
  8. return <IndexComponent></IndexComponent>
  9. }
  10. }
  11. new IndexPage('#app');

Page Interface

This section describes the page API, including namespace.

Namespace

ES6 import method:

 
  1. import { Page } from '@ali/kylin-framework';

API

Currently, Page provides the following member methods for derivation:

  • initOptions
  • render

initOptions

 
  1. function initOptions(): VueOptions

Return value

The return result must be a valid Vue input parameter. Generally, we do not recommend that you introduce complex configuration to the Page layer. Involved logic can be maintained in Component.

render

The function must be a valid render function of Vue.

 
  1. function render(): VNode

Return value

The return result must be a valid VNode element. Write according to JSX specifications.