Question

自从我开始研究这个问题以来已经过了好几个小时，我似乎无法理解这个问题。

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

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

应该与

一样对待

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

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

所以我研究并发现网上没有多少答案。他们中的大多数人都把我带到了angular-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;
  }
});

基本上，我想使尾随斜杠可选，即它在地址栏上的存在与否应该对加载的状态没有影响。

Answer 1

指向工作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

Answer 2

从ui-router版本0.2.11开始，你可以这样做：

$urlMatcherFactoryProvider.strictMode(false);

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

Answer 3

我没有足够的代表发表评论，所以回答： -

$urlMatcherFactoryProvider.strictMode(false);

需要在$stateProvider.state部分之前。

Answer 4

您好需要设置strictMode = false Angular ui-router为此提供了方法

$urlMatcherFactoryProvider.strictMode(false);

在初始化状态$stateProvider.state({})

之前，您需要设置严格模式

有关详细信息，请参阅此Link

Answer 5

对于angular-ui-router的 v1.x ，

urlMatcherFactoryProvider为deprecated。

使用urlService.config.strictMode（ng1，ng2）代替。

它仍然需要在$stateProvider.state()之前。

myApp.config(function($stateProvider, $urlServiceProvider) {
  var homeState = {
    name: 'home',
    url: '/home',
    component: 'xyHome'
  };

  $urlServiceProvider.config.strictMode(false);

  $stateProvider.state(homeState);

}）;

Answer 6

您也可以使用$urlRouterProvider.otherwise来处理路由器无法匹配路径的情况。

在以下示例中，路由器无法匹配/mypath，因此调用$urlRouterProvider.otherwise来找出要做什么。在这里，我们可以看到请求的路径并将其映射到正确的路径，即/mypath/

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

处理角度UI路由器中的尾部斜杠

6 个答案: