集成

第1步：package.json引入库

点击查看源码

//ES VUE SDK 核心库
"@extscreen/es-log": "x.x.x",
"@extscreen/es-core": "x.x.x",
"@extscreen/es-component": "3.0.1",

//去掉
//"@huantv/vue-router": "x.x.x"
//去掉
//"vue-router": "x.x.x",

"@extscreen/es-router": "x.x.x",

第2步：创建RouteMap

创建routes.js加入页面路由配置。

---

注意：页面路由配置必须用此种方法const index = () => import('./views/index')

---

下面以index.vue页面为例：

点击查看源码

const index = () => import('./views/index')
export default {
  /**
   * 设置页面的总数量
   */
  limit: 5,
  /**
   * 设置应用的入口页面
   */
  main: 'router_zero',
  /**
   * 设置页面路由
   */
  routes: [
    {
      path: '/index',
      name: 'index',
      component: index
    },
}

第3步：main-native.js中实例化ESRouter

点击查看源码

...
import ESRouter from '@extscreen/es-router';
Vue.use(ESRouter);

//routes为第2步创建的RouteMap
const router = new ESRouter(routes);

const app = new Vue({
  appName: 'EsApp',
  rootView: '#root',
  render: h => h(App),
  //注册router
  router,
});

第4步：main-native.js中注册路由组件

点击查看源码

...
//注册组件
import {
  ESPageRootViewComponent,
  ESPageRouterViewComponent,
} from '@extscreen/es-core';
Vue.use(ESPageRootViewComponent)
Vue.use(ESPageRouterViewComponent)
...

第3步：app.vue中初始化

点击查看源码

<template>
  <div id="root">
    //----------------①注册标签--------------------------
    <es-router-view/>
  </div>
</template>

import {
  ESApplication,
} from '@extscreen/es-core';
export default {
  name: 'ESApp',
  //---------------②引用ESApplication------------------
  mixins: [ESApplication],
}

配置完成，并且初始化成功后就可以进行页面的跳转了。