# 设置高级页面路由导航和路由视图组件属性
路由导航和路由视图组合使用，可实现路由导航以及展示当前生效路由对应的页面内容（如[图1]）。一个页面只支持放置一个路由导航和一个路由视图组件。路由导航和路由视图组件的属性和其他组件类似，可参考其他组件进行配置。
图1页面预览效果
#### 使用预置的路由导航和路由视图组件
在使用路由导航和路由视图组件时，该组件的页面和路由导航关联的页面布局类型必须为"流式布局"（即响应式布局，该布局下的Widget位置会随着Widget本身大小和页面大小自动调整）。在页面中，使用路由导航和路由视图组件的方法如下：
1. 已开发好布局类型为"流式布局"的高级页面。
请参考[创建华为云Astro轻应用高级页面](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_9093.html)中操作，事先创建好"home"、"page1"、"page2"和"empty"四个高级页面。
2. 进入应用设计器，在左侧导航栏中，选择"界面"。
3. 单击高级页面后的，页面标签和名称设置为"testnav"，布局类型选择"流式布局"，单击"添加"。
图2新建页面
4. 在设计页面左上方，单击，从"导航"中依次拖出路由导航(示例)和路由视图组件至设计页面右侧空白处。
图3拖拽所需组件到画布
5. 选中路由导航(示例)组件，在"路由"页签，配置不同路由关联的页面。
其中，"homepage"、"page1"、"page2"和"默认"分别从下拉列表中，选择[1]中已创建好的高级页面，"默认"页面为预览"testnav"页面时展示的默认页。
图4配置页面
路由导航组件本身作为路由页面跳转使用，只需要在"路由"页签进行配置，不需要在组件"事件"页签配置"点击"动作，实现页面跳转。
6. 单击页面上方的，保存页面。
7. 保存成功后，单击，发布页面。
8. 发布成功后，单击，可查看页面效果。
#### 基于预置组件进行自定义
如果需要修改导航路由的展示效果，例如在导航路由中增加一个路由标签，可基于预置的路由导航组件进行定制。
1. 参考[登录华为云Astro轻应用应用设计器](https://support.huaweicloud.com/usermanual-astrozero/astrozero_05_9004.html)中操作，登录应用设计器。
2. 单击页面左上角的，选择"环境管理 \> 环境配置"，进入环境配置。
3. 在顶部主菜单中，选择"维护"。
4. 在左侧导航栏中，选择"全局元素 \> 页面资产管理 \> 组件"。
5. 在"全局"组件中，单击"路由导航(示例)"，进入组件详情页面。
图5选择组件
6. 单击"下载"，将组件包下载到本地。
图6下载"路由导航(示例)"组件
7. 下载后的压缩包名为"global_Vue3NavigatorWidget_*版本* *号*"，请解压该包。
8. 修改解压后的"Vue3Navigator_Widget.js"文件。
"Vue3Navigator_Widget.js"文件是Widget逻辑文件，整个Widget的渲染核心JS。"路由导航(示例)"组件是基于Vue Router（ Vue.js官方的路由管理器）开发的，请参考Vue Router的代码开发规范，修改组件包中的文件。
本示例场景中，增加如下加粗代码。
```
var Vue3Navigator_Widget = StudioWidgetWrapper.extend(
{
init: function() {
var thisObj = this;
thisObj._super.apply(thisObj, arguments);
if ((typeof(Studio) != "undefined") && Studio) {
/*
* 平台会为每一级路由生成一个default路由,当其他路由匹配不到时, 可以匹配到该默认路由。
* name 需要唯一;
* displayName 用于在开发界面配置路由时展示
* params 定义路由的参数, 只有最顶层路由可以配置参数
* children 配置嵌套路由, 目前最多支持到三级路由
*/
// 通过Studio.registerRouter定义一个路由。
}
if($.isFunction(thisObj.getWidgetI18n)) {
thisObj.getWidgetI18n().then(function(){thisObj.render()});
} else {
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();
if (elem) {
var containerDiv = $(".scfClientRenderedContainer", elem);
if (containerDiv.length) {
$(containerDiv).empty();
} else {
containerDiv = document.createElement('div');
containerDiv.className = "scfClientRenderedContainer";
$(elem).append(containerDiv);
}
thisObj.i18nVM = Vue.createApp();
const i18n = HttpUtils.getI18n({
locale: HttpUtils.getLocale(),
messages: thisObj.getMessages()
}, thisObj.i18nVM);
thisObj.i18nVM.use(i18n);
thisObj.i18nVM.$t = i18n.global.t;
// 赋值保存的路由信息routers
const defaultRouters = {
homepage: {pageName: ''},
page1: {pageName: ''},
page2: {pageName: ''},
page3: {pageName: ''},
};
const routers = widgetProperties.routers ? JSON.parse(widgetProperties.routers): defaultRouters;
let routersArr = [
{
// 默认字体
Font0:{
FontSize: 16,
Color: 'rgba(255, 255, 255, 1)',
FontFamily: 'sans-serif',
FontWeight: 'normal'
},
// 悬浮文字
Font1:{
FontSize: 16,
Color: 'rgba(138, 191, 240, 1)',
FontFamily: 'sans-serif',
FontWeight: 'normal'
},
// 点击文字
Font2:{
FontSize: 16,
Color: 'rgb(255, 208, 75)',
FontFamily: 'sans-serif',
FontWeight: 'normal'
},
// 文本内容
textContent: thisObj.i18nVM.$t("router.homepage"),
// 页签路由
tabRouter:'',
// 默认样式
defaultStyle:'color',
defaultStyleBgColor:'rgba(84, 92, 100, 1)',
defaultStyleImage:'',
// 悬浮样式
hoverStyle:'color',
hoverStyleBgColor:'rgba(84, 92, 100, 1)',
hoverStyleImage:'',
// 点击样式
clickStyle:'color',
clickStyleBgColor:'rgba(84, 92, 100, 1)',
clickStyleImage:'',
name:'homepage',
deleteRoute:''
},{
// 默认字体
Font0:{
FontSize: 16,
Color: 'rgba(255, 255, 255, 1)',
FontFamily: 'sans-serif',
FontWeight: 'normal'
},
// 悬浮文字
Font1:{
FontSize: 16,
Color: 'rgba(138, 191, 240, 1)',
FontFamily: 'sans-serif',
FontWeight: 'normal'
},
// 点击文字
Font2:{
FontSize: 16,
Color: 'rgb(255, 208, 75)',
FontFamily: 'sans-serif',
FontWeight: 'normal'
},
// 文本内容
textContent: thisObj.i18nVM.$t("router.page1"),
// 页签路由
tabRouter:'',
// 默认样式
defaultStyle:'color',
defaultStyleBgColor:'rgba(84, 92, 100, 1)',
defaultStyleImage:'',
// 悬浮样式
hoverStyle:'color',
hoverStyleBgColor:'rgba(84, 92, 100, 1)',
hoverStyleImage:'',
// 点击样式
clickStyle:'color',
clickStyleBgColor:'rgba(84, 92, 100, 1)',
clickStyleImage:'',
name:'page1',
deleteRoute:''
},{
// 默认字体
Font0:{
FontSize: 16,
Color: 'rgba(255, 255, 255, 1)',
FontFamily: 'sans-serif',
FontWeight: 'normal'
},
// 悬浮文字
Font1:{
FontSize: 16,
Color: 'rgba(138, 191, 240, 1)',
FontFamily: 'sans-serif',
FontWeight: 'normal'
},
// 点击文字
Font2:{
FontSize: 16,
Color: 'rgb(255, 208, 75)',
FontFamily: 'sans-serif',
FontWeight: 'normal'
},
// 文本内容
textContent: thisObj.i18nVM.$t("router.page2"),
// 页签路由
tabRouter:'',
// 默认样式
defaultStyle:'color',
defaultStyleBgColor:'rgba(84, 92, 100, 1)',
defaultStyleImage:'',
// 悬浮样式
hoverStyle:'color',
hoverStyleBgColor:'rgba(84, 92, 100, 1)',
hoverStyleImage:'',
// 点击样式
clickStyle:'color',
clickStyleBgColor:'rgba(84, 92, 100, 1)',
clickStyleImage:'',
name:'page2',
deleteRoute:''
},{
// 默认字体
Font0:{
FontSize: 16,
Color: 'rgba(255, 255, 255, 1)',
FontFamily: 'sans-serif',
FontWeight: 'normal'
},
// 悬浮文字
Font1:{
FontSize: 16,
Color: 'rgba(138, 191, 240, 1)',
FontFamily: 'sans-serif',
FontWeight: 'normal'
},
// 点击文字
Font2:{
FontSize: 16,
Color: 'rgb(255, 208, 75)',
FontFamily: 'sans-serif',
FontWeight: 'normal'
},
// 文本内容
textContent: thisObj.i18nVM.$t("router.page3"),
// 页签路由
tabRouter:'',
// 默认样式
defaultStyle:'color',
defaultStyleBgColor:'rgba(84, 92, 100, 1)',
defaultStyleImage:'',
// 悬浮样式
hoverStyle:'color',
hoverStyleBgColor:'rgba(84, 92, 100, 1)',
hoverStyleImage:'',
// 点击样式
clickStyle:'color',
clickStyleBgColor:'rgba(84, 92, 100, 1)',
clickStyleImage:'',
name:'page3',
deleteRoute:''
}];
```
9. 根据需要修改解压后的"Vue3Navigator_Widget.ftl"文件（本场景不需要修改）。
"Vue3Navigator_Widget.ftl"文件是Widget dom结构文件，相当于HTML文件，负责样式展示。
```
```
10. 根据需要修改解压后的"Vue3Navigator_Widget.css"文件（本场景不需要修改）。
"Vue3Navigator_Widget.css"文件是Widget的样式文件，在该文件中编写Widget的css样式。
```
.navigator-widget-container {
text-align: left;
}
#navigator_widget {
font-size: 20px;
background-color: transparent;
height: auto;
}
#navigator_widget a {
display: inline-block;
height: 60px;
line-height: 60px;
padding: 0 20px;
text-decoration: none;
text-align: center;
}
/* #navigator_widget .router-link-exact-active {
color: rgb(255, 208, 75);
} */
#edit-navigator .navigator-wrap .flex-row {
display: flex;
align-items: center;
margin-bottom: 20px;
}
#edit-navigator .navigator-wrap .flex-row-bottom {
margin-bottom: 20px;
}
#edit-navigator .navigator-wrap .flex-row .label {
width: 70px
}
```
11. 修改"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"
}
}
```
12. 将所有文件（包括已修改的文件），重新打成zip包，包名为"global_NavigatorWidget.zip"。
13. 上传组件。
1. 在环境配置的"维护"中，选择"全局元素 \> 页面资产管理 \> 组件"。
2. 单击"提交新组件"，进入提交新组件页面。
3. 单击"请选择源文件(.zip)"，选择zip包，填写基本信息，单击"提交"。
图7上传组件
- 名字：组件名称，本示例配置为NavigatorWidget。
- 上传图标：组件的显示图标。
- 上传源文件：选择[12]中的global_NavigatorWidget.zip包。
- 分类：Widget所属分类，上传组件后，该组件将会在高级页面的该分类下进行展示。本示例选择"导航"。
- 领域：组件包应用的领域，一般保持默认"通用"。在组件列表中，可基于领域进行分类展示。
- 场景：组件包应用的场景。在组件列表中，可基于场景进行分类展示。
- 发行说明：组件的描述信息，需要配置不同语种下的描述信息。设置的信息，将会在组件详情页"概况"页签下进行展示。
14. 新建一个流式布局的高级页面。
1. 进入应用设计器，在左侧导航栏中，选择"界面"。
2. 单击高级页面后的，设置页面标签和名称，布局类型选择"流式布局"，单击"添加"。
15. 在设计页面左上方，单击，从"导航"的自定义组件中，拖拽[13]中上传的组件到设计区。
16. 选中该组件，在"路由"页签，配置不同路由关联的页面。
自定义组件的"路由"页签中，出现了页面3，结果符合场景要求。
图8拖拽自定义组件并配置路由
17. 在设计页面左上方，单击，从"导航"中拖拽路由视图组件至设计页面自定义组件下方。
18. 单击页面上方的，保存页面。
19. 保存成功后，单击，发布页面。
20. 页面发布成功后，单击，进入预览页面，查看页面效果。
新增了路由页面3，结果符合预期。
图9预览效果
#### 嵌套路由导航开发示例
如果要在路由导航中嵌套路由，实现如[图10]所示页面效果，即第一级路由导航中的homepage页嵌套第二级路由，第二级路由导航可跳转到homepage-1和homepage-2页面。实现上述功能需要在第一级路由导航js文件的路由参数中，使用children配置。
图10嵌套路由页面效果
1. 参考[基于预置组件进行自定义]中操作，下载路由导航(示例)预置组件，解压"global_Vue3NavigatorWidget_*版本号*.zip"。
2. 修改解压后的"Vue3Navigator_Widget.js"文件，在路由参数中使用children配置。
增加如下粗体字体代码：
```
// 赋值保存的路由信息routers
const defaultRouters = {
homepage: {pageName: '', children: [{}]},
page1: {pageName: ''},
page2: {pageName: ''},
};
const routers = widgetProperties.routers ? JSON.parse(widgetProperties.routers): defaultRouters;
let routersArr = [
{
// 默认字体
Font0:{
FontSize: 16,
Color: 'rgba(255, 255, 255, 1)',
FontFamily: 'sans-serif',
FontWeight: 'normal'
},
// 悬浮文字
Font1:{
FontSize: 16,
Color: 'rgba(138, 191, 240, 1)',
FontFamily: 'sans-serif',
FontWeight: 'normal'
},
// 点击文字
Font2:{
FontSize: 16,
Color: 'rgb(255, 208, 75)',
FontFamily: 'sans-serif',
FontWeight: 'normal'
},
// 文本内容
textContent: thisObj.i18nVM.$t("router.homepage"),
// 页签路由
tabRouter:'',
// 默认样式
defaultStyle:'color',
defaultStyleBgColor:'rgba(84, 92, 100, 1)',
defaultStyleImage:'',
// 悬浮样式
hoverStyle:'color',
hoverStyleBgColor:'rgba(84, 92, 100, 1)',
hoverStyleImage:'',
// 点击样式
clickStyle:'color',
clickStyleBgColor:'rgba(84, 92, 100, 1)',
clickStyleImage:'',
name:'homepage',
deleteRoute:'',
children: [
{
name: "homepage-1",
displayName: "homepage 1"
},
{
name: "homepage-2",
displayName: "homepage 2"
}
]
},{
// 默认字体
Font0:{
FontSize: 16,
Color: 'rgba(255, 255, 255, 1)',
FontFamily: 'sans-serif',
FontWeight: 'normal'
},
// 悬浮文字
Font1:{
FontSize: 16,
Color: 'rgba(138, 191, 240, 1)',
FontFamily: 'sans-serif',
FontWeight: 'normal'
},
// 点击文字
Font2:{
FontSize: 16,
Color: 'rgb(255, 208, 75)',
FontFamily: 'sans-serif',
FontWeight: 'normal'
},
// 文本内容
textContent: thisObj.i18nVM.$t("router.page1"),
// 页签路由
tabRouter:'',
// 默认样式
defaultStyle:'color',
defaultStyleBgColor:'rgba(84, 92, 100, 1)',
defaultStyleImage:'',
// 悬浮样式
hoverStyle:'color',
hoverStyleBgColor:'rgba(84, 92, 100, 1)',
hoverStyleImage:'',
// 点击样式
clickStyle:'color',
clickStyleBgColor:'rgba(84, 92, 100, 1)',
clickStyleImage:'',
name:'page1',
deleteRoute:''
},{
// 默认字体
Font0:{
FontSize: 16,
Color: 'rgba(255, 255, 255, 1)',
FontFamily: 'sans-serif',
FontWeight: 'normal'
},
// 悬浮文字
Font1:{
FontSize: 16,
Color: 'rgba(138, 191, 240, 1)',
FontFamily: 'sans-serif',
FontWeight: 'normal'
},
// 点击文字
Font2:{
FontSize: 16,
Color: 'rgb(255, 208, 75)',
FontFamily: 'sans-serif',
FontWeight: 'normal'
},
// 文本内容
textContent: thisObj.i18nVM.$t("router.page2"),
// 页签路由
tabRouter:'',
// 默认样式
defaultStyle:'color',
defaultStyleBgColor:'rgba(84, 92, 100, 1)',
defaultStyleImage:'',
// 悬浮样式
hoverStyle:'color',
hoverStyleBgColor:'rgba(84, 92, 100, 1)',
hoverStyleImage:'',
// 点击样式
clickStyle:'color',
clickStyleBgColor:'rgba(84, 92, 100, 1)',
clickStyleImage:'',
name:'page2',
deleteRoute:''
}];
routersArr = widgetProperties.routersArr ? JSON.parse(widgetProperties.routersArr) : routersArr;
var defaultPropObj = {
direction: 'row',
position:'defaultType',
quickSet:'center',
topDis:0,
leftDis:0,
defaultRoute:'',
routeStyle:''
}
defaultPropObj = widgetProperties.defaultPropObj ? $.extend({}, defaultPropObj, JSON.parse(widgetProperties.defaultPropObj)) : defaultPropObj;
// 注册路由
let arr = [];
Object.keys(routers).forEach(item=>{
let obj = {
name: item,
displayName: item,
params: [
{
name: "id",
displayName: "ID"
}
]
}
if(item === 'homepage') {
obj.children = [
{
name: "homepage-1",
displayName: "homepage 1"
},
{
name: "homepage-2",
displayName: "homepage 2"
}
];
}
arr.push(obj)
})
console.log('arr', arr);
Studio.registerRouter(thisObj, arr);
const height = $(elem).height();
const RouterPlugin = Studio.inReader
? Studio.router
: VueRouter.createRouter({ history: VueRouter.createWebHashHistory(), routes: [] });
```
3. 将所有文件（包括已修改的文件）重新打成zip包，包名为"global_NavigatorWidgetAdd1.zip"，并参考[基于预置组件进行自定义]中操作，上传该组件。
4. 新建一个流式布局的高级页面"Navigator"，在设计页面左上方单击，从"导航"的自定义组件中拖出刚创建的Widget至设计页面右侧空白处。单击选中该组件，会在右侧显示该组件的属性配置面板。选择"路由"页签，如[图11]所示配置第一级和第二级路由关联的页面。
图11配置路由
5. 在设计页面"Navigator"左上方单击，从"导航"中拖出路由视图组件至设计页面自定义组件下方。
6. 参考[基于预置组件进行自定义]中操作，下载预置组件路由导航(示例)，解压"global_Vue3NavigatorWidget_*版本号*.zip"。
7. 修改解压后的"Vue3Navigator_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. 修改解压后的"Vue3Navigator_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_Vue3NavigatorWidget_*版本号*.zip。
3. 修改解压后的"Vue3Navigator_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. 发布成功后，单击，可查看页面效果。