处理 angularUI 路由器中的尾部斜杠

问题描述

自从我开始解决这个问题已经有几个小时了，我似乎无法理解解决方案.

It's been hours since I started working on this problem and I can't seem to get my head around the solution.

我的应用可能会导致用户实际输入网址.在这种情况下，不难相信用户可能会输入尾部斜杠.例如，

I have an app that may result in users actually typing in the URL. In such cases it is not hard to believe that user might enter a trailing slash. For example,

www.example.com/users/2 和 www.example.com/edit/company/123

应该和

www.example.com/users/2/和 www.example.com/edit/company/123/

这仅需要在客户端处理 URL 路由时完成.我对处理资源/API 调用中的尾部斜杠不感兴趣.我只对处理浏览器中的尾随斜线感兴趣.

This only needs to done for handling URL routing on the client side. I am not interested in handling trailing slashes in resource/API calls. I am only interested in handling trailing slashed in the browser.

于是我研究了一下，在网上找到的答案并不多.他们中的大多数将我带到了 angular-ui 路由器的常见问题解答部分.

So I researched and found not many answers on the net. Most of them led me to the FAQ section of angular-ui router.

https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions

这里他们告诉我们写一个规则，这是我想做的，但它似乎不起作用，或者我做错了.

Here they tell us to write a rule, which is what I want to do, but it doesn't seem to be working, or maybe I am doing it wrong.

这是我添加代码的 plunkr.

Here's the plunkr where I have added my code.

http://plnkr.co/edit/fD9q7L?p=preview

我已将此添加到我的配置中，其余代码几乎是基本内容.

I have added this to my config, the rest of the code is pretty much the basic stuff.

$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;
  }
});

基本上，我想让尾部斜杠成为可选的，即地址栏上的斜杠的存在或不存在应该对加载的状态没有影响.

Basically, I want to make the trailing slash optional, ie it's presence or absence on the address bar should have no effect on the state loaded.

推荐答案

有一个链接到 plunker

这是更新后的规则定义:

And this is the updated rule definition:

  $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;
    }

  });

这些链接现在可以正常工作了:

And these links will now work properly:

  <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>

魔术可以这样定义:如果有变化就返回变化的值……否则什么都不做…… 参见示例

这篇关于处理 angularUI 路由器中的尾部斜杠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！