각도에서의 후행 슬래시 처리UI 라우터

각도에서의 후행 슬래시 처리UI 라우터

이 문제를 해결하기 시작한 지 몇 시간이 지났는데 해결 방법을 알 수가 없어요.

사용자가 실제로 URL을 입력할 수 있는 앱이 있습니다.이러한 경우 사용자가 후행 슬래시를 입력할 수 있다는 것은 어렵지 않습니다.예를들면,

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

와 동등하게 취급되어야 한다

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

이것은, 클라이언트측의 URL 루팅을 처리하기 위해서만 필요합니다.리소스/A의 후행 슬래시 처리에 관심이 없습니다.PI 콜브라우저의 트레일링 컷 처리에만 관심이 있습니다.

그래서 검색해보니 답이 별로 없더라고요.대부분은 앵귤러 라우터의 FAQ 섹션으로 안내되었습니다.

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

여기에서는 규칙을 작성하라고 합니다.제가 하고 싶은 일이지만, 효과가 없는 것 같거나 제가 잘못하고 있는 것 같습니다.

여기 코드를 추가한 plunkr가 있습니다.

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

기본적으로 후행 슬래시를 옵션으로 설정합니다. 즉, 주소 표시줄에 있는지 없는지 여부는 로드된 상태에 영향을 미치지 않습니다.

현용 플런커에 대한 링크가 있습니다.

그리고 업데이트된 규칙 정의는 다음과 같습니다.

  $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-router 버전 0.2.11 에서는, 다음의 조작을 실시할 수 있습니다.

$urlMatcherFactoryProvider.strictMode(false);

이렇게 하면 후행 슬래시가 있는 URL과 없는 URL이 동일하게 취급됩니다.

코멘트가 부족하기 때문에 답변해 주세요:-

$urlMatcherFactoryProvider.strictMode(false);

다음 날짜 이전이어야 합니다.$stateProvider.state일부.

urlMatcherFactoryProvider는 각도-의이성 v1.x에서는 권장되지 않습니다.

사용하다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);

});

안녕하세요. 설정하셔야 합니다.strictMode = false각도 UI 라우터는 이를 위한 방법을 제공합니다.

$urlMatcherFactoryProvider.strictMode(false); 

State를 초기화하기 전에 strict 모드를 설정해야 합니다.$stateProvider.state({})

자세한 내용은 이 링크를 참조하십시오.

를 사용하여 할 수도 있습니다.$urlRouterProvider.otherwise라우터가 패스와 일치할 수 없는 경우의 처리를 실시합니다.

가 "da"를 일치시킬 수 ./mypath '', '아까', '아까', '아까'라고 합니다.$urlRouterProvider.otherwise어떻게 해야 할지 알아내려고. 경로 '경로')에 수 ./mypath/

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

언급URL : https://stackoverflow.com/questions/24420578/handling-trailing-slashes-in-angularui-router