页面组件路由记录
只需要添加页面组件的路由记录，就可以实现页面组件的打开与跳转了
src/suite-vendor/test-party/modules/test-party/front/src/routes.js
- 1function loadjsx(name) {
- 2 return require(`./pages/${name}.jsx`).default;
- 3}
- 4
- 5function loadKitchenSink(name) {
- 6 return require(`./kitchen-sink/pages/${name}.vue`).default;
- 7}
- 8
- 9export default [
- 10 { path: 'jsx', component: loadjsx('jsx') },
- 11 { path: 'kitchen-sink/about', component: loadKitchenSink('about') },
- 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<eb-link eb-href="kitchen-sink/about">About</eb-link>
- 绝对路径
跨模块引用页面组件，必须使用绝对路径
- 1<eb-link eb-href="/test/party/kitchen-sink/about">About</eb-link>
- 特殊说明
组件eb-link是CabloyJS核心模块a-components提供的组件
组件eb-link继承自Framework7的f7-link，并进行了功能增强，从而可以使用相对路径
如果使用Framework7的组件f7-link，则总是需要使用绝对路径
- 1<f7-link href="/test/party/kitchen-sink/about">About</f7-link>
评论: