带有斜线的angularjs路由[重复]答案

【问题标题】：angularjs routing with slash [duplicate]带有斜线的angularjs路由[重复]
【发布时间】：2017-03-30 13:29:30
【问题描述】：

在以下 AngularJS/Ui-router 示例中，我有一个导航到 2 个状态：

<body ng-app='myApp'>
    <a ui-sref="home">Home</a>
    <a ui-sref="news">News</a>
    <ui-view></ui-view>
</body>


app.config(function($stateProvider){
  $stateProvider.state('home', {
    url : '/home',
    template: '<h1>Home page</h1>'
  });

  $stateProvider.state('news', {
    url : '/news',
    template: '<h1>News page</h1>'
  });
});

是的，如您所知，总体上一切正常。点击新闻链接将调用新闻状态等。

但是，假设您的用户进入浏览器导航器并写道：

WEBSITEURL/news/ 在末尾添加一个斜杠 /！

哦不！它不会重定向到 WEBSITEURL/news

为什么 /news 有效而 /news/ 无效？

一般来说，为什么 /uri 有效而 /uri/ 无效？

这根本不合逻辑。有什么好的解决方案可以摆脱这种情况？！

【问题讨论】：

相关：stackoverflow.com/questions/24420578/…

标签： javascript angularjs angular-ui-router angularjs-routing

【解决方案1】：

为您的ui-router 配置添加新规则：

$urlRouterProvider.rule(function($injector, $location) {
    var path = $location.path();
    if(path[path.length-1] === '/';) {
       var newPath = path.substr(0, path.length - 1); 
       return newPath
    } 

});

所以，你的代码变成了，

app.config(function($stateProvider){

    $urlRouterProvider.rule(function($injector, $location) {
        var path = $location.path();
        if(path[path.length-1] === '/';) {
          var newPath = path.substr(0, path.length - 1); 
          return newPath
        } 

    }); 

    $stateProvider.state('home', {
      url : '/home',
      template: '<h1>Home page</h1>'
    });

    $stateProvider.state('news', {
      url : '/news',
      template: '<h1>News page</h1>'
    });
});

【讨论】：