自从我开始处理这个问题已经好几个小时了,我似乎无法摆脱这个问题。
我有一个可能导致用户实际输入网址的应用程序。在这种情况下,不难相信用户可能会输入尾部斜线。例如,
www.example.com/users/2 and www.example.com/edit/company/123
应该是一样的
www.example.com/users/2/ and www.example.com/edit/company/123/
这只需要在客户端处理URL路由。我没有兴趣在资源/ API调用中处理尾部斜杠。我只想在浏览器中处理拖尾的兴趣。
所以我研究并发现网上没有多少答案。他们中的大多数引导我到角ui路由器的FAQ部分。
https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions
在这里,他们告诉我们写一个规则,这是我想要做的,但它似乎没有工作,或者也许我做错了。
http://plnkr.co/edit/fD9q7L?p=preview
$urlRouterProvider.rule(function($injector,$location) { //if last charcter is a slash,return the same url without the slash if($location.$$url[length-1] === '/') { return $location.$$url.substr(0,$location.$$url.length - 2); } else { //if the last char is not a trailing slash,do nothing return $location.$$url; } });
基本上,我想使可选的尾部斜线,即地址栏的存在或不存在对加载的状态没有影响。
有一个工作
plunker的链接
这是更新的规则定义:
$urlRouterProvider.rule(function($injector,$location) { var path = $location.path(); var hasTrailingSlash = path[path.length-1] === '/'; if(hasTrailingSlash) { //if last charcter is a slash,return the same url without the slash var newPath = path.substr(0,path.length - 1); return newPath; } });
这些链接现在可以正常工作:
<ul class="nav"> <li><a ui-sref="route1">Route 1</a></li> <li><a ui-sref="route2">Route 2</a></li> <li><a href="#/route1/">#/route1/</a></li> <li><a href="#/route2/">#/route2/</a></li> <li><a href="#/route1" >#/route1</a></li> <li><a href="#/route2" >#/route2</a></li> </ul>
魔术可以这样定义:如果有变化,请返回更改值…否则不做任何事情… see example