javascript Angular JS“路由”与 %2F 组件不匹配（编码为“/”）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16630912/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular JS 'route' doesn't match component with %2F (encoded '/')
提问by ConfusedNoob
I have a 'route' in Angular JS as follows
我在 Angular JS 中有一条“路线”，如下所示
$routeProvider.when('/foos/:fooId', { controller: FooController, templateUrl: 'foo.html'});
and it works great, unless the :fooId component contains either a '/' or '%2F' (encoded form)
并且效果很好，除非 :fooId 组件包含“/”或“%2F”（编码形式）
How can I make this work, my 'fooId' can contain /s ?
我怎样才能做到这一点，我的 'fooId' 可以包含 /s ？
采纳答案by Langdon
You can't easily do this because if you use a link with %2Fin it, the browser will just decode it for you and it'll end up being /. AngularJS currently doesn't allow you to use /in $routeparams.
你不能轻易做到这一点，因为如果你%2F在其中使用链接，浏览器只会为你解码它，它最终会是/. AngularJS 目前不允许你/在$routeparams 中使用。
You can double encode it, like in this plnkr: http://plnkr.co/edit/e04UMNQWkLRtoVOfD9b9?p=preview
您可以对它进行双重编码，就像在这个 plnkr 中一样：http://plnkr.co/edit/e04UMNQWkLRtoVOfD9b9?p=preview
var app = angular.module('app', []);
app.controller('HomeCtrl', function ($scope, $route) {
});
app.controller('DirCtrl', function ($scope, $route) {
var p = $route.current.params;
$scope.path = decodeURIComponent(p.p1);
});
app.config(function ($routeProvider) {
$routeProvider
.when('/', {templateUrl: 'home.html', controller: 'HomeCtrl'})
.when('/dir/:p1', {templateUrl: 'dir.html', controller: 'DirCtrl'})
.otherwise({redirectTo: '/'});
});
And the link would be: <a href="#/dir/a%252Fb%252Fc">click here</a>.
链接将是：<a href="#/dir/a%252Fb%252Fc">click here</a>。
Another option, if you have a set number of /characters in your parameters can be found here: How can I make the angular.js route the long path
另一种选择，如果您/的参数中有一定数量的字符，可以在这里找到：如何使 angular.js 路由长路径
回答by Fortega
Based on the answer of Langdon, I created a filter which encodes everything twice, and another one which decodes:
根据兰登的回答，我创建了一个过滤器，对所有内容进行两次编码，另一个进行解码：
.filter('escape', function() {
return function(input) {
return encodeURIComponent(encodeURIComponent(input));
};
})
.filter('unescape', function() {
return function(input) {
return decodeURIComponent(input);
};
});
I use this in my product links as follows:
我在我的产品链接中使用它如下：
<a href="#/p/{{product.id}}/{{product.name | escape}}">
On the product page, I decode the product name:
在产品页面，我解码产品名称：
<h1>{{product.name | unescape}}</h1>
回答by Ankur Gupta
You need not to encode anything here. Just add * in your path Param as mentioned below and enable html5Mode
你不需要在这里编码任何东西。只需在您的路径参数中添加 * 如下所述并启用 html5Mode
app.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/home', {templateUrl: 'home.html', controller: 'HomeCtrl'})
.when('/base/:path*', {templateUrl: 'path.html', controller: 'pathCtrl'})
.otherwise({redirectTo: '/home'});
});
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
回答by Himanshu Shekhar
include $locationProvider.hashPrefix(''); in your config.
包括 $locationProvider.hashPrefix(''); 在你的配置中。
