路由导航和路由视图
路由导航和路由视图组合使用,可实现路由导航以及展示当前生效路由对应的页面内容(如图1)。一个页面只支持放置一个路由导航和一个路由视图组件。
使用预置的路由导航和路由视图组件
在使用路由导航和路由视图组件时,当前使用该组件的页面和路由导航关联的页面布局类型必须为“流式布局”(即响应式布局,该布局下的Widget位置会随着Widget本身大小和页面大小自动调整)。在页面中,使用路由导航和路由视图组件的方法如下:
- 已开发好布局类型为“流式布局”的高级页面。
例如,已开发好“home”、“page1”、“page2”和“empty”四个高级页面。
图2 创建流式布局的高级页面 - 参考如何登录经典应用设计器中操作,登录经典应用设计器。
- 鼠标放在某个文件夹上,单击加号,选择“高级页面”。
- 页面标签和名称设置为“testnav”,布局类型选择“流式布局”,单击“添加”。
图3 新建页面
- 在设计页面左上方,单击
,从“导航”中依次拖出路由导航(示例)和路由视图组件至设计页面右侧空白处。
图4 拖拽所需组件到画布 - 选中路由导航(示例)组件,在“路由”页签,配置不同路由关联的页面。
其中,“homepage”、“page1”、“page2”和“默认”分别从下拉列表中,选择1中已创建好的高级页面,“默认”页面为预览“testnav”页面时展示的默认页。图5 配置页面
路由导航组件本身作为路由页面跳转使用,只需要在“路由”页签进行配置,不需要在组件“事件”页签配置“点击”动作,实现页面跳转。
- 单击页面上方的
,保存页面。
- 保存成功后,单击
,发布页面。
- 发布成功后,单击
,可查看页面效果。
基于预置组件进行自定义
如果需要修改导航路由的展示效果,例如在导航路由中增加一个路由标签,可基于预置的路由导航组件进行定制。
- 参考如何登录经典版环境配置中操作,登录经典版环境配置。
- 在左侧导航栏中,选择 。
- 在“全局”组件中,单击“路由导航(示例)”,进入组件详情页面。
图6 选择组件
- 单击“下载”,将组件包下载到本地。
图7 下载“路由导航(示例)”组件
- 下载后的压缩包名为“global_NavigatorWidget.zip”,请解压该包。
- 修改解压后的“Navigator_Widget.js”文件。
“Navigator_Widget.js”文件是Widget逻辑文件,整个Widget的渲染核心JS。“路由导航(示例)”组件是基于Vue Router( Vue.js官方的路由管理器)开发的,请参考Vue Router的代码开发规范,修改组件包中的文件。
本示例场景中,增加如下加粗代码。
var Navigator_Widget = StudioWidgetWrapper.extend( { / Triggered when initializing a widget and will have the code that invokes rendering of the widget setParentContainer(JQueryParentContainerDOM) - binds event to this container setItemContainer(JQueryItemContainerDOM) - binds studio item events for respective item containers bindEvents() - binds the studio event to this widget */ init: function() { var thisObj = this; thisObj._super.apply(thisObj, arguments); if ((typeof(Studio) != "undefined") && Studio) { /* 平台会为每一级路由生成一个default路由,当其他路由匹配不到时, 可以匹配到该默认路由。 name 需要唯一; displayName 用于在开发界面配置路由时展示 params 定义路由的参数, 只有最顶层路由可以配置参数 children 配置嵌套路由, 目前最多支持到三级路由 */ const router = [ { name: 'homepage', displayName: 'homepage', params: [ { name: "id", displayName: "ID" } ] }, { name: 'page1', displayName: 'page1', params: [ { name: "id", displayName: "ID" } ] }, { name: 'page2', displayName: 'page2', params: [ { name: "id", displayName: "ID" } ] }, { name: 'page3', displayName: 'page3', params: [ { name: "id", displayName: "ID" } ] } ]; // 通过Studio.registerRouter定义一个路由。 Studio.registerRouter(thisObj, router); } thisObj.render(); }, / Triggered from init method and is used to render the widget */ render: function() { var thisObj = this; var widgetProperties = thisObj.getProperties(); var elem = thisObj.getContainer(); var items = thisObj.getItems(); var connectorProperties = thisObj.getConnectorProperties(); / API to get base path of your uploaded widget API file */ var widgetBasePath = thisObj.getWidgetBasePath(); if (elem) { var containerDiv = $(".scfClientRenderedContainer", elem); if (containerDiv.length) { $(containerDiv).empty(); } else { containerDiv = document.createElement('div'); containerDiv.className = "scfClientRenderedContainer"; $(elem).append(containerDiv); } const i18n = HttpUtils.getI18n({ locale: HttpUtils.getLocale(), messages: thisObj.getMessages() }); // 通过router: Studio.router注入路由对象。 var vm = new Vue({ el: $("#navigator_widget",elem)[0], i18n: i18n, router: Studio.router }); } / API to bind global events to the item DOM : thisObj.sksBindItemEvent(); API to bind item events to the item DOM : thisObj.sksBindItemEvent(JQueryItemContainerSelector, ItemIdx); JQueryItemContainerSelector - A JQuery selector that returns an array of DOMs that represents the individual item inside the item container, to which the hotspot needs to be bound. ItemIdx (Optional) - To bind the item events to a specific item. */ thisObj.sksBindItemEvent(); / API to refresh the previously bound events when a resize or orientation change occurs. thisObj.sksRefreshEvents(ItemIdx); ItemIdx (Optional) - To refresh events for a specific item. Default value is 0. */ $(window).resize(function() { thisObj.sksRefreshEvents(); }); } });
- 修改解压后的“Navigator_Widget.ftl”文件。
“Navigator_Widget.ftl”文件是Widget dom结构文件,相当于HTML文件,负责样式展示。本示例场景中,增加如下加粗代码。
<div id="navigator_widget" v-cloak> <router-link :to="{name: 'homepage', params: {id: 0}}">{{$t("router.homepage")}}</router-link> <router-link :to="{name: 'page1', params: {id: 1}}">{{$t("router.page1")}}</router-link> <router-link :to="{name: 'page2', params: {id: 2}}">{{$t("router.page2")}}</router-link> <router-link :to="{name: 'page3', params: {id: 3}}">{{$t("router.page3")}}</router-link> </div>
- 根据需要修改解压后的“Navigator_Widget.css”文件(本场景不需要修改)。
“Navigator_Widget.css”文件是Widget的样式文件,在该文件中编写Widget的css样式。
#navigator_widget { font-size: 20px; background-color: rgb(84, 92, 100); } #navigator_widget a { display: inline-block; color: #fff; height: 60px; line-height: 60px; padding: 0 20px; text-decoration: none; } #navigator_widget .router-link-exact-active { color: rgb(255, 208, 75); }
- 修改“messages-zh.json”和“messages-en.json”文件。
该文件为Widget的国际化资源文件,本示例场景中增加如下加粗代码。
- “messages-zh.json”文件:
{ "zh-CN": { "router.homepage": "首页", "router.page1": "页面1", "router.page2": "页面2", "router.page3": "页面3", "router.default": "默认", "router": "路由", "router.tip": "只能选择已发布的页面" } }
- “messages-en.json”文件
{ "en-US": { "router.homepage": "Home", "router.page1": "Page one", "router.page2": "Page Two", "router.page3": "Page Three", "router.default": "Default", "router": "Router", "router.tip": "Only published pages can be selected" } }
- “messages-zh.json”文件:
- 将所有文件(包括已修改的文件),重新打成zip包“global_NavigatorWidgetNew.zip”。
- 上传组件。
- 在经典版开发环境管理中心,选择“应用管理 > 页面资产管理 > 组件”。
- 单击“提交新组件”,进入提交新组件页面。
- 单击“请选择源文件(.zip)”,选择zip包,填写基本信息,单击“提交”。
- 名字:组件名称,本示例配置为NavigatorWidget。
- 上传图标:组件的显示图标。
- 上传源文件:选择10中的global_NavigatorWidgetNew.zip包。
- 分类:Widget所属分类,上传组件后,该组件将会在高级页面的该分类下进行展示。本示例选择“导航”。
- 领域:组件包应用的领域,一般保持默认“通用”。在组件列表中,可基于领域进行分类展示。
- 场景:组件包应用的场景。在组件列表中,可基于场景进行分类展示。
- 发行说明:组件的描述信息,需要配置不同语种下的描述信息。设置的信息,将会在组件详情页“概况”页签下进行展示。
- 新建一个流式布局的高级页面。
- 进入经典版应用设计器,鼠标放在某个文件夹上,单击加号,选择“高级页面”。
- 设置页面标签和名称,布局类型选择“流式布局”,单击“添加”。
- 在设计页面左上方,单击
,从“导航”的自定义组件中,拖拽11中上传的组件到设计区。
- 选中该组件,在“路由”页签,配置不同路由关联的页面。
自定义组件的“路由”页签中,出现了页面3,结果符合场景要求。图8 拖拽自定义组件并配置路由
- 在设计页面左上方,单击
,从“导航”中拖拽路由视图组件至设计页面自定义组件下方。
- 单击页面上方的
,保存页面。
- 保存成功后,单击
,发布页面。
- 页面发布成功后,单击
,进入预览页面,查看页面效果。
新增了路由页面3,结果符合预期。图9 预览效果
嵌套路由导航开发示例
如果要在路由导航中嵌套路由,即实现如图10所示页面效果。需要在第一级路由导航js文件的路由参数中,使用children配置。
- 参考基于预置组件进行自定义中操作,下载路由导航(示例)预置组件,解压“global_NavigatorWidget.zip”。
- 修改解压后的“Navigator_Widget.js”文件,在路由参数中使用children配置。
增加如下粗体字体代码:
if ((typeof(Studio) != "undefined") && Studio) { /* 平台会为每一级路由生成一个$default路由,当其他路由匹配不到时, 可以匹配到该默认路由。 name需要唯一; displayName用于在开发界面配置路由时展示 params定义路由的参数, 只有最顶层路由可以配置参数 */ const router = [ { name: 'homepage', displayName: 'homepage', params: [ { name: "id", displayName: "ID" } ], children: [ { name: "homepage-1", displayName: "homepage 1" }, { name: "homepage-2", displayName: "homepage 2" } ] }, { name: 'page1', displayName: 'page1', params: [ { name: "id", displayName: "ID" } ] }, { name: 'page2', displayName: 'page2', params: [ { name: "id", displayName: "ID" } ] } ]; // 通过Studio.registerRouter定义一个路由。 Studio.registerRouter(thisObj, router); }
- 将所有文件(包括已修改的文件)重新打成zip包,包名为“global_NavigatorWidgetAdd1.zip”,并参考基于预置组件进行自定义中操作,上传该组件。
- 新建一个流式布局的高级页面“Navigator”,在设计页面左上方单击
,从“导航”的自定义组件中拖出刚创建的Widget至设计页面右侧空白处。单击选中该组件,会在右侧显示该组件的属性配置面板。选择“路由”页签,如图11所示配置第一级和第二级路由关联的页面。
- 在设计页面“Navigator”左上方单击
,从“导航”中拖出路由视图组件至设计页面自定义组件下方。
- 参考基于预置组件进行自定义中操作,下载预置组件路由导航(示例),解压“global_NavigatorWidget.zip”。
- 修改解压后的“Navigator_Widget.js”文件,由于在第一级路由导航组件中已定义第二级路由,您需要在第二级路由导航的js文件中删除路由定义的代码。
删除如下代码:
if ((typeof(Studio) != "undefined") && Studio) { /* 平台会为每一级路由生成一个default路由,当其他路由匹配不到时, 可以匹配到该默认路由。 name 需要唯一; displayName 用于在开发界面配置路由时展示 params 定义路由的参数, 只有最顶层路由可以配置参数 children 配置嵌套路由, 目前最多支持到三级路由 */ var router = [ { name: 'homepage', displayName: 'homepage', params: [ { name: "id", displayName: "ID" } ] }, { name: 'page1', displayName: 'page1', params: [ { name: "id", displayName: "ID" } ] }, { name: 'page2', displayName: 'page2', params: [ { name: "id", displayName: "ID" } ] } ]; // 通过Studio.registerRouter定义一个路由。 Studio.registerRouter(thisObj, router); }
- 修改解压后的“Navigator_Widget.ftl”文件,修改路由的页面参数,改为2中添加的children配置。
该文件是Widget dom结构文件,相当于HTML文件,负责样式展示。本示例场景中,增加如下加粗代码。
<div id="Navigator_Widget"> <router-link :to="{name: 'homepage-1', params: {id: 1}}">homepage-1</router-link> <router-link :to="{name: 'homepage-2', params: {id: 2}}">homepage-2</router-link> </div>
- 将所有文件(包括已修改的文件)重新打成zip包,包名为“global_NavigatorWidgetAdd2.zip”,参考基于预置组件进行自定义中操作,上传该组件。
- 打开使用第二级路由导航的页面“home”,在设计页面左上方单击
,从“导航”的自定义组件中拖出刚创建的Widget至设计页面右侧空白处。在“路由”页签,不做任何配置。
图12 “路由”页签 - 在设计页面“home”左上方单击
,从“导航”中拖出路由视图组件至设计页面自定义组件下方。
- 分别单击“home”和“Navigator”页面上方保存图标进行保存。
- 在“Navigator”页面上方单击
进行发布。
- 单击
查看“Navigator”页面效果,如图10所示,查看到嵌套路由,符合预期。
自定义布局样式
如果导航页面,想实现如下图所示布局效果,即整个页面不需要有滚动条,而其中导航组件区域和全局路由视图组件区域可随滚动条滚动时,可参考如下步骤实现。
![](https://support.huaweicloud.com/usermanual-astrozero/zh-cn_image_0000001960124585.png)
- 在头部组件的“.css”样式文件中,指定头部组件的高度。
样例代码如下:
#headerWidget { height: 90px; }
- 参考基于预置组件进行自定义中操作,下载预置组件路由导航(示例),解压global_NavigatorWidget.zip。
- 修改解压后的“Navigator_Widget.css”文件,该文件是Widget的样式文件,在该文件中编写Widget的css样式。
样例代码如下:
html[app=desktop] body { overflow: hidden; } #navigatorWidget, #global_RouterViewWidget { height: calc(100% - 90px); overflow: scroll; }
- 将修改后的头部组件和组件路由导航组件文件,重新打成zip包。
- 参考基于预置组件进行自定义中操作,上传重新打包后的组件。
- 在高级页面设计器左上方,单击
,拖出上传的头部组件、路由导航组件和预置的路由视图组件至设计页面。
- 单击页面上方的
,保存页面。
- 保存成功后,单击
,发布页面。
- 发布成功后,单击
,可查看页面效果。