Question

在下面的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 / 在最后添加斜杠 / ！

OH NOOOO！它不会重定向到 WEBSITEURL / news

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

一般来说，为什么 / uri 有效且 / uri / 不起作用？

这根本不符合逻辑。什么是解决这个问题的好方法？！

Answer 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>'
    });
});

angularjs使用斜杠进行路由

1 个答案: