Angularjs angularUI路由器中尾部斜线的处理

从我开始研究这个问题到现在已经有好几个小时了，我似乎无法集中精力解决这个问题

我有一个应用程序，可能会导致用户实际键入URL。在这种情况下，不难相信用户可能会输入一个尾随斜杠。比如说,

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

应被视为

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

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

所以我在网上研究发现答案不多。他们中的大多数人把我带到AngularUI路由器的FAQ部分

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

这是我添加代码的plunkr

我已经把它添加到我的配置中，剩下的代码基本上都是基本的东西

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

---

基本上，我想让后面的斜杠成为可选的，即地址栏上是否有斜杠对加载的状态没有影响。

有一个指向工作的链接

这是更新的规则定义：

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

魔术可以这样定义：如果有更改，请返回更改的值。。。否则什么都不做

从ui路由器版本开始，您可以执行以下操作：

$urlMatcherFactoryProvider.strictMode(false);

---

这将以相同的方式处理带有和不带有斜杠的URL。

我没有足够的评论代表，因此请回答：-

$urlMatcherFactoryProvider.strictMode(false);

---

需要位于

$stateProvider.state

部分之前。

您好，您需要设置

strictMode=false

AngularUI路由器为此提供了一种方法

$urlMatcherFactoryProvider.strictMode(false); 

在初始化State

$stateProvider.State（{}）

---

有关更多详细信息，请参阅此

URLMacherFactoryProvider

用于angular ui路由器的v1.x

改为使用

urlService.config.strictMode

（，）

它仍然需要在$stateProvider.state（）之前

---

}))

您也可以使用

$urlRouterProvider来执行此操作。否则

将处理路由器无法匹配路径的情况

在下面的示例中，路由器无法匹配

/mypath

，因此调用

$urlRouterProvider。否则

以了解如何操作。在这里，我们可以看到请求的路径并将其映射到正确的路径，即

/mypath/

app.config(function($urlRouterProvider) {
    $urlRouterProvider.otherwise(function ($injector, $location) {
        if ($location.$$path == '/mypath')
            return "/mypath/";
        else
            return "/defaultpath";
    });

---

哎呀。我在$location中调用了错误的方法：{这样一个noob mistakteAFAIK，只有在应用程序的每个模块中定义此规则时才起作用。这可能没问题，但在客户端路由器配置中，如果您将它们分离到每个模块中，则最终会出现重复的代码。有人在应用程序级别上解决了此问题吗？@MichaelLeanos，如果y你可以这样构造你的模块：有一个主模块注入了所有其他模块。在GitHub上看看这个。你所需要做的就是将你的共享功能添加到主配置文件中，它可以在你的Angular应用程序中工作。@Cyn你是对的。我意识到，在我深入研究了一个问题之后，我发现了一个问题。我有一个任务dule命名为“Core”，我在其中定义规则。然而，我的模块加载方式是按字母顺序的。我专门测试了一个按字母顺序排列在“Core”之前的模块，但没有应用该规则。然后我测试了另一个在“Core”之后出现的模块；它起作用了。因此我意识到了该缺陷。我最终只是注入了“Core”模块作为一个依赖项插入到其他模块中。我相信这就是您所描述的。是的，这似乎是可行的。这与我的意思不完全一致。事实上，我的想法是将所有其他模块注入主模块中，并拥有一个由该主模块控制的主基文件，因此，如果您愿意，您可以随时禁用应用程序h、 不要破坏太多内容。下面是一个示例：！重要！必须在$stateProvider.state部分之前！也与1.x版本兼容

app.config(function($urlRouterProvider) {
    $urlRouterProvider.otherwise(function ($injector, $location) {
        if ($location.$$path == '/mypath')
            return "/mypath/";
        else
            return "/defaultpath";
    });