Aura组件实现页面导航时报错 pageReference获取异常咨询

问题描述 #

在Aura组件中实现页面导航逻辑时触发报错，报错信息截图如下：

当前从父组件获取pageReference的实现代码如下：

var pageReference = component.get("v.pageReference");
console.log('getpropertyDetails pageReference'+JSON.stringify(pageReference));

问题原因与修复方案 #

• 首先检查组件接口声明：只有实现了force:hasPageReference接口的Aura组件，才会被框架自动注入v.pageReference属性，缺失该接口声明时直接读取属性会返回空值或抛出访问错误。需要在组件根标签中补充接口声明：

<aura:component implements="force:hasPageReference,flexipage:availableForAllPageTypes">
    <!-- 组件其余业务代码 -->
</aura:component>

• 注意属性赋值时机：v.pageReference会在组件初始化完成、页面上下文加载完毕后才会被框架赋值，如果在init事件回调的最前置逻辑中直接读取，大概率拿到空值。可以新增属性变更监听器，等pageReference被赋值后再执行业务逻辑：

<!-- 组件标签内新增监听处理器 -->
<aura:handler name="change" value="{!v.pageReference}" action="{!c.handlePageRefUpdate}"/>

对应控制器代码：

handlePageRefUpdate: function(component, event, helper) {
    const pageReference = component.get("v.pageReference");
    if (!pageReference) return;
    console.log('getpropertyDetails pageReference' + JSON.stringify(pageReference));
    // 后续参数解析、导航触发逻辑写在此处
}

• 嵌套组件传值校验：如果你的组件是嵌套在其他自定义组件内的子组件，force:hasPageReference注入的pageReference只会绑定在最外层接入页面上下文的组件上，不会自动穿透到子组件。需要父组件拿到pageReference后，通过自定义属性显式传给子组件，不能直接在子组件中读取v.pageReference。

执行导航操作时统一使用lightning:navigation标准服务的navigate方法触发跳转，不要直接修改window.location，避免在Lightning Experience环境下出现上下文不兼容、跨域报错。

内容的提问来源于stack exchange，提问作者Sarisha Prajapati