# Umbraco 路由 ## 这是什么？ Umbraco 后台的路由支持使用基于路径名的 URL 在各个部分、仪表板和工作区之间进行导航。部分充当主要的组织分隔线，通过部分视图、仪表板或自定义元素提供入口点。可以使用“umb-router-slot”以及支持参数和重定向的路由定义来构建自定义路由。 ## 文档在实施之前始终获取最新文档： * **主要文档**： * **部分**： * **仪表板** ： * **基础** ： ## 参考示例 Umbraco 源代码包含一个工作示例： **位置**：`/Umbraco-CMS/src/Umbraco.Web.UI.Client/examples/modal-routed/` 此示例演示了具有基于 URL 的导航和深度链接支持的路由模式。研究复杂的路由模式。 ## 工作流程 1. **获取文档** \- 在上面的 URL 上使用 WebFetch 2. **提问** \- 自定义路线？版块导航？需要参数吗？ 3. **生成代码** \- 根据最新文档实现路由 4. **解释** \- 显示创建的内容以及导航的工作原理 ## 最小示例 ### 带有路径名的部分 { “类型”：“部分”， "alias": "我的.Section", "name": "我的版块", “元”：{ "label": "我的版块", “路径名”：“我的部分” } } URL：`/section/我的部分` ### 带有路径名的仪表板 { “类型”：“仪表板”， "alias": "My.Dashboard", "name": "我的仪表板", “元”：{ “标签”：“欢迎”， “路径名”：“欢迎仪表板” }, “条件”：[ { "alias": "Umb.Condition.SectionAlias", "match": "Umb.Section.Content" } ] } URL：`/section/content/dashboard/welcome-dashboard` ### 带有路由的自定义路由器从 '@umbraco-cms/backoffice/external/lit' 导入 { html, customElement, state }; 从 '@umbraco-cms/backoffice/lit-element' 导入 { UmbLitElement }；从 '@umbraco-cms/backoffice/router' 导入类型 { UmbRoute }； @customElement('我的路由元素') 导出类 MyRoatedElement 扩展 UmbLitElement { @状态（）私人_路线：UmbRoute [] = [ { 路径: '人/:personId', 组件： () => import('./person.element.js'), 设置：（_component，信息）=> { console.log('personId:', info.match.params.personId); }, }, { 路径：“人”，组件：() => import('./people.element.js'), }, { 路径：''，重定向至：'人'， }, ]; 渲染（）{ 返回 html` `; } } ### 带参数的路由 { 路径：'编辑/：id'，组件：() => import('./edit.element.js'), 设置：（组件，信息）=> { const id = info.match.params.id; 组件.itemId = id; }, } ### 带重定向的路由 { 路径：''，重定向到：'概述'， } ### 多条路线示例 @状态（）私人_路线：UmbRoute [] = [ { 路径：'概述'，组件：() => import('./overview.element.js'), }, { 路径：'设置'，组件：() => import('./settings.element.js'), }, { 路径：'项目/：id'，组件：() => import('./item-detail.element.js'), 设置：（组件，信息）=> { 组件.itemId = info.match.params.id; }, }, { 路径：''，重定向到：'概述'， }, ]; ### 导航链接渲染（）{ 返回 html` <导航> 概述设置项目 123 `; } ### 带路径名的剖面视图 { “类型”：“剖面视图”， "alias": "My.SectionView", "name": "我的剖面视图", “元素”：“/App_Plugins/MyExtension/section-view.js”， “元”：{ "label": "组织", “路径名”：“组织”， "icon": "图标用户" }, “条件”：[ { "alias": "Umb.Condition.SectionAlias", "match": "我的部分" } ] } URL：`/section/my-section/organization` ### 嵌套路由 // 父元素 @状态（）私人_路线：UmbRoute [] = [ { 路径：'管理员'，组件：() => import('./admin-layout.element.js'), }, { 路径：'用户'，组件：() => import('./users-layout.element.js'), }, ]; // 管理布局元素可以有自己的嵌套路由 @状态（）私人_adminRoutes：UmbRoute [] = [ { 路径：'仪表板'，组件：() => import('./admin-dashboard.element.js'), }, { 路径：'设置'，组件：() => import('./admin-settings.element.js'), }, ]; ### 路线设定功能 { 路径: '编辑/:documentId', 组件：() => import('./document-editor.element.js'), 设置：（组件，信息）=> { // 访问路由参数 const documentId = info.match.params.documentId; // 传递给组件组件.documentId = documentId; // 还可以访问查询参数等。 console.log('路线信息：', info); }, } ## 关键概念 **路径名**：部分/仪表板/视图的 URL 段 **umb-router-slot** ：渲染匹配路由的组件 **UmbRoute** ：带有路径、组件、设置的路由定义 **路线顺序**：第一场比赛获胜 - 顺序很重要！ **参数** ：在路径中使用 `:paramName` （例如，`item/:id`） **重定向** ：使用 `redirectTo` 重定向到另一个路径 **setup Function** ：路由匹配时调用，接收组件和路由信息 **网址结构**： * 节：`/节/我的节` * 仪表板：`/section/content/dashboard/welcome` * 部分视图：`/section/my-section/organization` * 自定义：`/section/my-section/people/person/123` **入口点**： * 剖面视图（带有选项卡/图标） * 仪表板（带有选项卡/图标） * 工作区（实体编辑） * 自定义元素（完全控制）就是这样！始终获取新文档，保持示例最少，生成完整的工作代码。

乌布拉科路由

包含技能