AngularJS 路由参数可以包含任意字符

我是 AngularJS 的新手，所以如果这是显而易见的，请原谅我，但我正在寻找可以回答这个棘手问题的人。我正在实现一个应用程序，需要将一些参数传递到特定视图以显示有关书籍的详细信息。基本上我希望能够使用以下路由表达式：

bookApp.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/catalog', {
            templateUrl: 'cataloglist.htm',
            controller: 'catCtrl'
        }).
        when('/book/:title/:chapter', {
            template: 'chapterdetail.htm',
            controller: 'chapterCtrl'
        }).
        otherwise({
            template: 'oops ... do not understand that route',
        });
    }]);

表达方式/book/:title/:chapter应该允许我以书名的名义传递。我希望能够通过其中任何一本书的任何标题。为了确保内容正确分隔，我将对标题值进行 URL 编码，以便在编码值中不会有斜杠，并且该值将由斜杠字符清楚地分隔。这是构造包含值的 URL 的正常方法。

问题是存在包含斜杠字符的书名（例如The 3/5 solution) 这是 URL 编码为The+3%2F5+Solution。所以可以构造这样的URL：

 /app/#/book/The+3%2F5+Solution/The%20Beginning

然而，我的经验似乎表明，整个值在分解为参数之前都经过 URL 解码！这意味着任何带有斜杠的数据值都将被被误解作为两个值，并且路由参数的模式匹配被破坏，并且只传入值的前半部分。此外，章节名称中也可能有斜杠。

如果我正在制作 REST 服务，我将对值进行 URL 编码，并且在解码每个部分之前将 URL 解析为多个部分。例如，我可以在 URL 中使用查询参数，如下所示：

app.jsp?title=The+3%2F5+Solution&chapter=The%20Beginning

这将正常工作。使用 URL 编码，我可以在标题中传递任何字符串值。我希望路由参数能做同样的事情......但我已经提到我是 AngularJS 的新手。

解码%2F在确定碎片之前插入斜线似乎是一个非常严重的错误。显然，您根本无法将带有斜杠的值作为路由参数传递。我在这里错过了什么吗？有什么解决方案可以让我安全地传递包含任何可能字符的书名（以及包含任何字符的章节标题）作为路由参数？

看看角度的route.js源代码 https://github.com/angular/angular.js/blob/master/src/ngRoute/route.js，描述了实现您正在寻找的目标的可能性：

path可以包含以冒号开头并以星号结尾的命名组： 例如:name*。所有字符都急切地存储在$routeParams在给定的情况下name当路由匹配时。

例如，类似的路线/color/:color/largecode/:largecode*\/edit将匹配/color/brown/largecode/code/with/slashes/edit并提取：
color: brown
largecode: code/with/slashes.

注意末尾的反斜杠:largecode*\示例中的参数。它不存在于以星号结尾的命名组的描述中，但它存在于示例中。我没有对此进行测试，也不知道是否需要反斜杠，因此请考虑可能/可能不需要。

因此，您的问题的解决方案将如下所示：/book/:title*/chapter/:chapter*

注意添加的/chapter/部分。为了区分两个命名组，这是必需的。如果你只是使用/book/:title*/:chapter*，一切都将落入:title*命名组。但是，如果您使用/:title*/chapter/:chapter*，角度知道什么时候:title*命名组结束：当遇到/chapter/在路线中。之后的一切/chapter/将落入:chapter*命名组