如何为AngularJS的$routeProvider配置问号后的callbackUrl查询参数

存在三处核心错误导致路由匹配失败触发默认跳转：

1. $routeProvider.when()的路径规则不需要声明查询参数，ngRoute匹配时仅校验路径部分，你在路径末尾添加?callbackUrl会导致实际路径无法匹配规则。
2. $location.path()仅负责设置URL的路径段，拼接查询参数会将?识别为路径的一部分，导致匹配失败，查询参数需通过$location.search()单独设置。
3. 直接对this.$location对象做base64编码得到的是[object Object]的转码结果，无法作为有效回调地址，需要调用API取实际路径字符串。

修正代码 #

1. 路由配置（src/js/routingUI.js） #

删除路径规则中多余的查询参数声明：

...
$routeProvider
    .when('/admin/test/profile/:profileId/edit', {
        template: '<test-profile-edit></test-profile-edit>'
    });

2. 跳转逻辑（testProfileDetails.js） #

拆分路径与查询参数设置，修正回调地址取值：

goToTestEdit() {
    // 取当前页面路径字符串编码
    const callbackURL = btoa(this.$location.url());
    const self = this;
    this.$timeout(function() {
        self.$location.path('/admin/test/profile/' + self.testProfile.id + '/edit');
        // 单独设置查询参数
        self.$location.search('callbackUrl', callbackURL);
    }, 1);
}

test-profile-details.html 代码无需修改，调整后即可生成符合预期的URL，不会触发异常跳转。

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