支持页面嵌套路由，TinyEngine v2.2让开发者构建复杂应用更高效

本文分享自华为云社区《TinyEngine v2.2 版本发布：支持页面嵌套路由，提升多层级路由管理能力 & 开发分支调整》，作者：OpenTiny。
TinyEngine v2.2版本正式发布！本次更新带来了重要的功能增强——页面支持嵌套路由，让开发者在构建复杂应用时更加得心应手。接下来，我们将详细介绍该版本的几大亮点与改进
v2.2.0变更特性概览

• 页面支持嵌套路由，出码支持多层级路由嵌套结构
  
• 物料协议npm字段整改，物料协议新增字段：materials.packages
  
• 状态管理默认值支持表达式
  
• 默认开启区块插件中的区块分类与物料插件中区块分组合并的选项
  
• 修复了多个问题，包括Element Plus出码样式引入、I18n格式化、国际化配置弹窗异常等
  
• 默认分支变更，refactor/develop 分支更改为 develop
  

详情可见：https://github.com/opentiny/tiny-engine/releases/tag/v2.2.0
TinyEngine v2.2.0新特性解读
1. 页面支持嵌套路由
Vue 的路由管理器 vue-router 在前端项目中得到了广泛应用，尤其是其强大的嵌套路由功能，能够让开发者以层级化的方式组织和渲染页面组件。TinyEngine 在2.2.0版本之前，虽然出码也引入了 vue-router，但是页面路由仅有顶层路由，不支持嵌套。为了更好地管理复杂的页面结构和提升开发效率，我们在此次更新中引入了嵌套路由的支持，特别是将 vue-router 中常用的 router-link 和 router-view 引入 TinyEngine 低代码平台。这一功能使得开发者能够像在 Vue 项目中一样，灵活地管理多层级路由，轻松实现页面的嵌套和跳转，从而提升了平台的可用性和开发效率，帮助开发人员更快速地构建出符合需求的应用程序。
页面支持嵌套路由大特性，带来10余项路由相关全新能力：

• 画布渲染器：支持多层级的父子页面嵌套渲染，并在页面切换时实现局部切换刷新，提供更加灵活的渲染体验
  
• 页面管理插件：支持在静态页面下任意层级创建子页面，并允许通过拖拽进行页面编排，使页面管理更加直观便捷
  
• 画布容器：画布顶部新增了路由指示器，帮助开发者更清晰地查看页面路由结构
  
• 内置物料：新增了 RouterLink、RouterView，以及横向和竖向导航的快捷 snippet，为快速构建页面提供了更多选择
  
• 属性配置：新增页面选择器，支持选择跳转页面
  
• 预览模块：在单页预览时，支持嵌套视图的预览，提供更完整的视图展示
  
• 出码模块：支持多层级路由嵌套结构的输出，优化了复杂项目的开发流程
  
• 画布容器右键功能增强：增加了 RouterLink 的右键菜单功能，可以快速进行路由跳转
  
• 画布容器工具增强：增加非激活页面悬停，支持 RouterLink 组件悬停菜单，并支持通过悬停菜单直接点击进行跳转，提升了操作的便捷性
  
• 工具栏：新增了切换嵌套视图和单页视图的功能，使得页面查看和编辑更加灵活
  

接下来我们将逐步操作来展示上述新增的特性
演示的最终效果会达到如下图所示。
Root 页面为父页面，拥有3个子页面，分别可以使用导航栏中的路由链接进行跳转。跳转到子页面后同时显示父页面，父子页面嵌套渲染。

支持静态页面下新建子页面。首先进入页面管理插件，新增一个 Root 页面，新建完成后，悬停 Root 项，点击右侧出现的菜单项，接着点击新建子页面。弹出的表单中，表单项"父文件夹/父页面"会自动填充，填写表单项"页面名称"和"页面路由"然后保存，即可新建一个子页面。这里我们新建一个子页面，名为 Home。

页面树支持拖拽编排。 为了演示拖拽编排功能，我们先在根目录新建一个页面名为 Intro，新建完成后可以看到 Intro 页面是在顶层。然后拖拽 Intro 页面到 Root 页面下，松开鼠标后页面右上角提示"保存成功"说明拖拽已完成。

接着再添加一个子页面名为 Docs，你可以参考刚刚添加 Intro 页面的步骤添加 Docs 页面，也可以直接在 Root 页面下新建子页面。最终 Root 页面的树结构为这样：

新增了内置物料，属性配置中新增页面选择器。打开 Root 页面，我们从物料拖入导航条和路由视图。导航条是预设的多个路由链接组成的 snippet，路由链接设置好跳转页面后可以用来跳转到其他路由，路由视图则是子路由插槽。这里的逻辑和 vue-router 是保持一致的，并且最终出码也是使用的 vue-router。在这里我们给每个路由链接设置到对应的路由。

RouterLink 增加右键菜单路由跳转，或者通过悬停菜单点击后跳转。画布顶部的路由指示器，也可以点击跳转。 如下图操作所示，我们给每个子页面添加一条简单的文本，方面查看当前子页面是哪一个。可以通过点击路由链接的右键菜单来实现路由跳转，需要注意的是，右键菜单只能在当前编辑（激活）页面的组件上生效。所以我们额外增加了一种交互方式，当你悬停在路由链接上时，无论此时路由链接是否能够编辑，可以点击右上角出现的跳转按钮来实现路由跳转。

画布渲染器：支持父子多层级页面嵌套渲染，支持切换页面的时候局部切换刷新。 如上图所示，在跳转到子页面后嵌套渲染了父子页面，在子路由之间切换只进行了局部刷新。
预览时，支持单页预览的时候嵌套视图预览。 如下图所示，单页预览子页面时，会同时显示父页面内容。横向导航条属于父页面内容，导航条下面的"我是 Home 页"文本则属于子页面内容。

工具栏增加切换嵌套视图/单页视图。 点击页面右上角的菜单按钮，可以查看到新增了"切换到单页/嵌套视图"的选项。使用此选项来进行嵌套视图/单页视图的切换。

出码支持多层级路由嵌套结构的输出。 上述应用最终出码的路由文件如下：

1. import { createRouter, createWebHashHistory } from 'vue-router'
2. const routes = [
3.   {
4.     name: '8984',
5.     path: 'Root',
6.     component: () => import('@/views/Root.vue'),
7.     children: [
8.       {
9.         name: '8987',
10.         path: 'Docs',
11.         component: () => import('@/views/Root/Docs.vue'),
12.         children: []
13.       },
14.       {
15.         name: '8985',
16.         path: 'Home',
17.         component: () => import('@/views/Root/Home.vue'),
18.         children: []
19.       },
20.       {
21.         name: '8986',
22.         path: 'Intro',
23.         component: () => import('@/views/Root/Intro.vue'),
24.         children: []
25.       }
26.     ]
27.   },
28.   {
29.     name: '8903',
30.     path: 'test',
31.     component: () => import('@/views/Test.vue'),
32.     children: []
33.   },
34.   {
35.     name: '8907',
36.     path: 'Untitled',
37.     component: () => import('@/views/Untitled.vue'),
38.     children: []
39.   }
40. ]
42. export default createRouter({
43.   history: createWebHashHistory(),
44.   routes: [{ path: '/', children: routes }]
45. })

复制代码

2. 物料协议更新
（1）将组件依赖的组件库信息从组件 npm 字段中提取到 materials.packages 字段统一管理。

（2）兼容了原来的字段配置。
3. 状态管理默认值支持表达式
背景：如果页面状态变量配置了 getter、setter。但是默认值为表达式的场景，出码会有 bug。
比如：

1. {
2.   // 状态变量
3.   "state": {
4.     "IconPlusSquare": {
5.       // 默认值为表达式
6.       "defaultValue": {
7.         "type": "JSResource",
8.         "value": "this.utils.IconPlusSquare()"
9.       },
10.       // 带有 getter 或者是 getter
11.       "accessor": {
12.         "getter": {
13.           "type": "JSFunction",
14.           "value": "function() { this.state.IconPlusSquare = `${this.state.firstName} ${this.state.lastName}` }"
15.         }
16.       }
17.     }
18.   }
19. }

复制代码

旧版本无法支持该场景下的出码，新版本支持正常出码为：

1. // 状态默认值出码
2. const state = vue.reactive({
3.   IconPlusSquare: utils.IconPlusSquare(),
4. })
6. // getter 出码
7. vue.watchEffect(
8.   wrap(function () {
9.     this.state.IconPlusSquare = `${this.state.firstName} ${this.state.lastName}`
10.   })
11. )

复制代码

TODO: 当前仅在出码侧进行了支持，变量插件侧需要后续支持配置复杂的状态变量初始值。
4. 默认开启区块插件中的区块分类与物料插件中区块分组合并的选项
在之前 v2.1.0 版本的更新中，提供了将区块插件中的区块分类与物料插件中区块分组合并的选项，此功能是提供给Java版本的后端使用，v2.2.0 版本默认打开了此功能
如果你使用了Java版本的后端，无需再修改注册表配置，mergeCategoriesAndGroups 默认值为 true
如果你使用了NodeJS版本的后端，将注册表中的区块插件中的 mergeCategoriesAndGroups 修改成 false

1. export default {
2.   // ...
3.   plugins: [
4.     Materials,
5.     Tree,
6.     Page,
7.     // NodeJS版本后端，Block 插件设置 mergeCategoriesAndGroups 选项 为 false
8.     [Block, { options: { ...Block.options, mergeCategoriesAndGroups: false } }],
9.     Datasource,
10.     Bridge,
11.     I18n,
12.     Script,
13.     State,
14.     Schema,
15.     Help,
16.     Robot
17.   ],
18.   // ...
19. }

复制代码

5. 其他：交互、功能细节优化 & bug 修复

• 修复：state getter、setter 无法保存修改与globalState getter 在画布计算不正确问题@chilingling #930
  
• 修复：区块有插槽和传参时出码异常问题@chilingling #919
  
• 修复：自定义区块和组件预览时，无法完整正确渲染出内容（组件或区块缺失）@chilingling #920
  
• 修复：使用Java后端在区块管理创建分组时因参数类型错误导致报错问题@gene9831 #985
  
• 修复：解决物料中使用相对路径脚本时动态组件 URL 错误的问题。@BWrong #958
  
• 修复：切换页面或区块时未清除选中区域问题@chilingling #992
  
• 修复：编辑器中国际化词条配置弹窗切换全屏时位置问题@yy-wow #969
  
• 优化：页面 JS 插件编辑器增加代码示例提示。通过@SonyLeo #1012
  
• 修复：解决刷新页面后保存插件勾选自动保存状态无效的问题@SonyLeo #1004
  
• 修复：页面设置中的父表单字段不显示@gene9831 #1069
  
• 修复：数据源类型选择显示异常@SonyLeo #1082
  
• 修复：出码包含 element-plus 时，没有引入样式的bug @chilingling #817
  
• 修复：国际化词条下拉选择选项格式问题 @yy-wow #950
  
• 修复：点击国际化配置区域会导致当前属性配置弹窗整体关闭的问题 @yy-wow #970
  

以上是此次更新问题修复的主要内容，更多细节请查看 v2.2.0 changelog Bug Fixes
6. 默认分支变更
背景：在过去我们TinyEngine v2.0版本重构开发过程中，v2.0开发分支refactor/develop与v1.0开发分支develop同步迭代演进，如今v2.0版本已完成架构调整趋于稳定，同时两个版本也存在较大差异不便于直接合入，后续双分支演进重新调整为：v2.0版本分支设为默认分支持续迭代演进，v1.0版本不增加新特性只修复问题。在24年12月份已经完成TinyEngine develop分支重命名为v1.x分支，refactor/develop分支设置为默认分支的调整。
本次将默认分支refactor/develop 重命名为develop，调整后更符合语义与分支命名规范。后续所有新分支将基于develop 分支开发，需要确保本地仓库同步更新，可以参考下面步骤：
a）先修改远程仓库设置：如果是基于TinyEngine fork的项目，在fork仓库的分支管理页面: https://github.com/{YourUserName}/tiny-engine/branches ，将refactor/develop分支重命名为develop(如果是基于TinyEngine clone的项目可以忽略该步骤)

b）然后修改本地仓库：

1. # 获取最新分支信息
2. git fetch origin
3. # 重命名本地分支
4. git branch -m refactor/develop develop
5. # 更新本地分支的远程跟踪分支
6. git branch --set-upstream-to=origin/develop develop
7. # 删除旧的远程分支引用（可选）
8. git fetch --prune

复制代码

如何使用新版本

• 如果是从 2.0.0 版本升级上来，只需要在 cli 创建出来的工程，将 @opentiny/tiny-engine 相关的依赖，升级到 2.2.0 即可
  
• 如果是从 1.x 版本升级上来，需要参考迁移指南，升级到 2.2 版本
  
• 如果是全新创建项目，仅需要使用 tinyengine-cli 创建项目即可。npx @opentiny/tiny-engine-cli create-platform my-designer
  

结语
随着 TinyEngine v2.2.0 版本的发布，路由嵌套视图、页面管理与渲染能力得到了极大的提升，让开发者在构建复杂应用时更加高效、灵活。此外，物料资产包协议和界面交互的优化进一步提升了开发体验。我们将继续致力于提供更强大的功能和更加完善的细节优化，感谢大家的支持与反馈，期待在未来版本中为您带来更多惊喜！
 

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！