# 路由导航和路由视图
路由导航和路由视图组合使用，可实现路由导航以及展示当前生效路由对应的页面内容（如[图1]）。一个页面只支持放置一个路由导航和一个路由视图组件。
图1页面预览效果
#### 使用预置的路由导航和路由视图组件
在使用路由导航和路由视图组件时，当前使用该组件的页面和路由导航关联的页面布局类型必须为"流式布局"（即响应式布局，该布局下的Widget位置会随着Widget本身大小和页面大小自动调整）。在页面中，使用路由导航和路由视图组件的方法如下：
1. 已开发好布局类型为"流式布局"的高级页面。
例如，已开发好"home"、"page1"、"page2"和"empty"四个高级页面。
图2创建流式布局的高级页面
2. 参考[登录经典应用设计器](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_5025.html)中操作，登录经典应用设计器。
3. 鼠标放在某个文件夹上，单击加号，选择"高级页面"。
4. 页面标签和名称设置为"testnav"，布局类型选择"流式布局"，单击"添加"。
图3新建页面
5. 在设计页面左上方，单击，从"导航"中依次拖出路由导航(示例)和路由视图组件至设计页面右侧空白处。
图4拖拽所需组件到画布
6. 选中路由导航(示例)组件，在"路由"页签，配置不同路由关联的页面。
其中，"homepage"、"page1"、"page2"和"默认"分别从下拉列表中，选择[1]中已创建好的高级页面，"默认"页面为预览"testnav"页面时展示的默认页。
图5配置页面
路由导航组件本身作为路由页面跳转使用，只需要在"路由"页签进行配置，不需要在组件"事件"页签配置"点击"动作，实现页面跳转。
7. 单击页面上方的，保存页面。
8. 保存成功后，单击，发布页面。
9. 发布成功后，单击，可查看页面效果。
#### 基于预置组件进行自定义
如果需要修改导航路由的展示效果，例如在导航路由中增加一个路由标签，可基于预置的路由导航组件进行定制。
1. 参考[如何登录经典版环境配置](https://support.huaweicloud.com/usermanual-astrozero/astrozero_06_2092.html)中操作，登录经典版环境配置。
2. 在左侧导航栏中，选择"应用管理 \> 页面资产管理 \> 组件"。
3. 在"全局"组件中，单击"路由导航(示例)"，进入组件详情页面。
图6选择组件
4. 单击"下载"，将组件包下载到本地。
图7下载"路由导航(示例)"组件
5. 下载后的压缩包名为"global_NavigatorWidget.zip"，请解压该包。
6. 修改解压后的"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();
});
}
});
```
7. 修改解压后的"Navigator_Widget.ftl"文件。
"Navigator_Widget.ftl"文件是Widget dom结构文件，相当于HTML文件，负责样式展示。本示例场景中，增加如下加粗代码。
```
{{$t("router.homepage")}}
{{$t("router.page1")}}
{{$t("router.page2")}}
{{$t("router.page3")}}
```
8. 根据需要修改解压后的"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);
}
```
9. 修改"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"
}
}
```
10. 将所有文件（包括已修改的文件），重新打成zip包"global_NavigatorWidgetNew.zip"。
11. 上传组件。
1. 在经典版开发环境管理中心，选择"应用管理 \> 页面资产管理 \> 组件"。
2. 单击"提交新组件"，进入提交新组件页面。
3. 单击"请选择源文件(.zip)"，选择zip包，填写基本信息，单击"提交"。
- 名字：组件名称，本示例配置为NavigatorWidget。
- 上传图标：组件的显示图标。
- 上传源文件：选择[10]中的global_NavigatorWidgetNew.zip包。
- 分类：Widget所属分类，上传组件后，该组件将会在高级页面的该分类下进行展示。本示例选择"导航"。
- 领域：组件包应用的领域，一般保持默认"通用"。在组件列表中，可基于领域进行分类展示。
- 场景：组件包应用的场景。在组件列表中，可基于场景进行分类展示。
- 发行说明：组件的描述信息，需要配置不同语种下的描述信息。设置的信息，将会在组件详情页"概况"页签下进行展示。
12. 新建一个流式布局的高级页面。
1. 进入经典版应用设计器，鼠标放在某个文件夹上，单击加号，选择"高级页面"。
2. 设置页面标签和名称，布局类型选择"流式布局"，单击"添加"。
13. 在设计页面左上方，单击，从"导航"的自定义组件中，拖拽[11]中上传的组件到设计区。
14. 选中该组件，在"路由"页签，配置不同路由关联的页面。
自定义组件的"路由"页签中，出现了页面3，结果符合场景要求。
图8拖拽自定义组件并配置路由
15. 在设计页面左上方，单击，从"导航"中拖拽路由视图组件至设计页面自定义组件下方。
16. 单击页面上方的，保存页面。
17. 保存成功后，单击，发布页面。
18. 页面发布成功后，单击，进入预览页面，查看页面效果。
新增了路由页面3，结果符合预期。
图9预览效果
#### 嵌套路由导航开发示例
如果要在路由导航中嵌套路由，即实现如[图10]所示页面效果。需要在第一级路由导航js文件的路由参数中，使用children配置。
图10嵌套路由页面效果
1. 参考[基于预置组件进行自定义]中操作，下载路由导航(示例)预置组件，解压"global_NavigatorWidget.zip"。
2. 修改解压后的"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);
}
```
3. 将所有文件（包括已修改的文件）重新打成zip包，包名为"global_NavigatorWidgetAdd1.zip"，并参考[基于预置组件进行自定义]中操作，上传该组件。
4. 新建一个流式布局的高级页面"Navigator"，在设计页面左上方单击，从"导航"的自定义组件中拖出刚创建的Widget至设计页面右侧空白处。单击选中该组件，会在右侧显示该组件的属性配置面板。选择"路由"页签，如[图11]所示配置第一级和第二级路由关联的页面。
图11配置路由
5. 在设计页面"Navigator"左上方单击，从"导航"中拖出路由视图组件至设计页面自定义组件下方。
6. 参考[基于预置组件进行自定义]中操作，下载预置组件路由导航(示例)，解压"global_NavigatorWidget.zip"。
7. 修改解压后的"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);
}
```
8. 修改解压后的"Navigator_Widget.ftl"文件，修改路由的页面参数，改为[2]中添加的children配置。
该文件是Widget dom结构文件，相当于HTML文件，负责样式展示。本示例场景中，增加如下加粗代码。
```
homepage-1
homepage-2
```
9. 将所有文件（包括已修改的文件）重新打成zip包，包名为"global_NavigatorWidgetAdd2.zip"，参考[基于预置组件进行自定义]中操作，上传该组件。
10. 打开使用第二级路由导航的页面"home"，在设计页面左上方单击，从"导航"的自定义组件中拖出刚创建的Widget至设计页面右侧空白处。在"路由"页签，不做任何配置。
图12"路由"页签
11. 在设计页面"home"左上方单击，从"导航"中拖出路由视图组件至设计页面自定义组件下方。
12. 分别单击"home"和"Navigator"页面上方保存图标进行保存。
13. 在"Navigator"页面上方单击进行发布。
14. 单击查看"Navigator"页面效果，如[图10]所示，查看到嵌套路由，符合预期。
#### 自定义布局样式
如果导航页面，想实现如下图所示布局效果，即整个页面不需要有滚动条，而其中导航组件区域和全局路由视图组件区域可随滚动条滚动时，可参考如下步骤实现。
图13自定义布局样式页面效果
1. 在头部组件的".css"样式文件中，指定头部组件的高度。
样例代码如下：
```
#headerWidget {
height: 90px;
}
```
2. 参考[基于预置组件进行自定义]中操作，下载预置组件路由导航(示例)，解压global_NavigatorWidget.zip。
3. 修改解压后的"Navigator_Widget.css"文件，该文件是Widget的样式文件，在该文件中编写Widget的css样式。
样例代码如下：
```
html[app=desktop] body {
overflow: hidden;
}
#navigatorWidget, #global_RouterViewWidget {
height: calc(100% - 90px);
overflow: scroll;
}
```
4. 将修改后的头部组件和组件路由导航组件文件，重新打成zip包。
5. 参考[基于预置组件进行自定义]中操作，上传重新打包后的组件。
6. 在高级页面设计器左上方，单击，拖出上传的头部组件、路由导航组件和预置的路由视图组件至设计页面。
7. 单击页面上方的，保存页面。
8. 保存成功后，单击，发布页面。
9. 发布成功后，单击，可查看页面效果。