angularjs – 在angularUI路由器中处理斜杠

发布时间：2020-12-17 08:19:52 所属栏目：安全来源：网络整理

导读：自从我开始处理这个问题已经好几个小时了，我似乎无法摆脱这个问题。我有一个可能导致用户实际输入网址的应用程序。在这种情况下，不难相信用户可能会输入尾部斜线。例如， www.example.com/users/2 and www.example.com/edit/company/123 应该是一样的 www

自从我开始处理这个问题已经好几个小时了，我似乎无法摆脱这个问题。

我有一个可能导致用户实际输入网址的应用程序。在这种情况下，不难相信用户可能会输入尾部斜线。例如，

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

在这里，他们告诉我们写一个规则，这是我想要做的，但它似乎没有工作，或者也许我做错了。

这是我添加了我的代码的plunkr。

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!