页面组件路由清单

EggBornJS自动将模块的API路由清单合并到Framework7统一的清单中

src/module-vendor/test-party/front/src/routes.js

  1. 1function loadjsx(name) {
  2. 2 return require(`./pages/${name}.jsx`).default;
  3. 3}
  4. 4
  5. 5function loadKitchenSink(name) {
  6. 6 return require(`./kitchen-sink/pages/${name}.vue`).default;
  7. 7}
  8. 8
  9. 9export default [
  10. 10 { path: 'jsx', component: loadjsx('jsx') },
  11. 11 { path: 'kitchen-sink/about', component: loadKitchenSink('about') },
  12. 12];
名称 说明
path 页面组件路径
componet 页面组件对象

- 语法:.vue/.jsx

EggBornJS前端同时支持.vue.jsx两种语法

- 加载模式

模块内部的所有页面组件均采用同步语法。模块前端具体加载模式取决于模块的命名方式

模块名称 加载模式
a-base-sync 同步加载
test-party 异步加载

引用页面组件路由

引用页面组件路由主要有两种形式:相对路径绝对路径

形式 格式 举例
相对路径 pagePath kitchen-sink/about
绝对路径 /providerId/moduleName/pagePath /test/party/kitchen-sink/about

- 相对路径

引用本模块内部的页面组件,可以使用相对路径

  1. 1<eb-link eb-href="kitchen-sink/about">About</eb-link>

- 绝对路径

跨模块引用页面组件,必须使用绝对路径

  1. 1<eb-link eb-href="/test/party/kitchen-sink/about">About</eb-link>

- 特殊说明

组件eb-linkCabloyJS核心模块a-components提供的组件

组件eb-link继承自Framework7f7-link,并进行了功能增强,从而可以使用相对路径

如果使用Framework7的组件f7-link,则总是需要使用绝对路径

  1. 1<f7-link href="/test/party/kitchen-sink/about">About</f7-link>