浏览器刷新页面时，路由器不触发onMatched回调

Question

我有一个带有 RootComponent 的应用程序，其中包含两个嵌套组件。这两个组件之一（称为 UserComponent）显示 FlexibleColumnLayout 并具有定义了两个 URL 参数的路由：

{
    "pattern": "detail/{objectId}/detailDetail/{treeObjectId}/{layout}",
    "name": "detailDetail",
    "target": [
        "list",
        "detail",
        "detailDetail"
    ],
    "greedy": true
}

然后，我尝试像这样访问控制器中的相应 URL 参数：

onInit: function() {
    console.log("onInit() DetailController");
    // ...
    this.oRouter = this.getOwnerComponent().getRouter();
    this.oRouter.getRoute("list").attachMatched(this._onUrlMatched, this);
    this.oRouter.getRoute("detail").attachMatched(this._onUrlMatched, this);
    this.oRouter.getRoute("detailDetail").attachMatched(this._onUrlMatched, this);
},

_onUrlMatched: function(oEvent) {
    console.log("onUrlMatched()");
    // Fetch URL parameters...
    // Do something with the URL parameters...
},

我观察到的行为如下：

当我通过逐步导航路由（列表、详细信息、detailDetail）来展开FlexibleColumnLayout时，
```
_onUrlMatched
```
回调被正确触发，并且当前的URL参数被成功解析。
但是当我重新加载页面时，即使所有相关控制器的
```
_onUrlMatched
```
函数都被执行，
```
onInit()
```
回调也不会被调用。当我将完整的 URL 粘贴到新的浏览器选项卡中时，也会发生同样的情况。

我已经找到了一个带有嵌套组件的官方示例项目，其行为与我想要的类似。但是，该示例未使用FlexibleColumnLayout，并且我发现manifest.xml或控制器文件与我的实现没有任何区别。

为什么当我重新加载页面时回调没有被触发？

Answer 1

经过大量挖掘，我找到了问题的解决方案。原来是

manifest.xml

中的路由器配置错误。我必须更改配置从

"routing": {
    "config": {
        "routerClass": "sap.f.routing.Router",
        "viewType": "XML",
        "viewPath": "com.demo.admin.view",
        "controlId": "flexibleColumnLayout",
        "async": true,
        "transition": "slide"
    },
    //...
}

进入

"routing": {
    "config": {
        "routerClass": "sap.f.routing.Router",
        "type": "View",
        "viewType": "XML",
        "path": "com.demo.admin.view",
        "controlId": "flexibleColumnLayout",
        "async": true,
        "transition": "slide"
    },
    //...
}

我通过将我当前的项目与这个示例项目进行比较发现了。

为了完整起见，这是我的

index.html

文件，此解决方案适用于：

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo Admin</title>

    <script id="sap-ui-bootstrap"
        src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
        data-sap-ui-theme="sap_horizon"
        data-sap-ui-resourceroots='{
            "com.demo.admin": "./"
        }'
        data-sap-ui-xx-bindingSyntax="complex"
        data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
        data-sap-ui-compatVersion="edge"
        data-sap-ui-async="true"
        data-sap-ui-frameOptions="trusted">
    </script>
</head>

<body class="sapUiBody sapUiSizeCompact">
    <div data-sap-ui-component
        data-name="com.demo.admin"
        data-height="100%"
        data-id="container"
        data-settings='{"id" : "rootComponent"}'
        style="height: 100%">
    </div>
</body>
</html>

这是我的

App.view.xml

文件：

<mvc:View
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.f"
    xmlns:m="sap.m"
    controllerName="com.demo.admin.controller.App"
    displayBlock="true"
    height="100%">

    <FlexibleColumnLayout
        id="flexibleColumnLayout"
        backgroundDesign="Solid"
        stateChange=".onStateChanged"
        layout="{/layout}" />

</mvc:View>

浏览器刷新页面时，路由器不触发onMatched回调

问题描述投票：0回答：1

1个回答

最新问题

浏览器刷新页面时，路由器不触发onMatched回调

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1