Browser Zurück-Taste Umleiten zur vorherigen Seite und Anhängen der Route jeweils mal mit url wird Routing mit angulrjs getan

Question

die folgenden URL zeigt die Auflistung Bücher eines Benutzers unter einem Mieter xxtenant in der folgenden URL

http://localhost:5306/xxtenant#/mybooks

die Route Konfiguration für die oben unten ist,

$routeProvider.when('/mybooks', { 
    templateUrl: '/partials/mybooks.html', 
    controller: 'mybooksCtrl', 
    resolve: { 
     //code to check tokens 
    } 
}) 

die Aggregationsseite i eine Taste habe das Buch Details zu bearbeiten, , wenn ich auf die Schaltfläche klicken der Browserumleitet

$routeProvider.when('/editbook/:bookId?/:action/:status', { 
    templateUrl: '/partials/editbook.html', controller: 'editbookCtrl', resolve: { 
     //code to check tokens 
    } 

}) 

Wenn i-Browser klicken Zurück-Button auf dieser Seite bearbeiten, es auf die vorherige Seite wird umgeleitet und die URL wurde wie unten, http://localhost:5306/xxtenant#/mybooks#%2Fmybooks.

Also, wenn Klick Schaltfläche Bearbeiten, wird sie auf der Bearbeitungsseite umgeleitet und die URL wird http://localhost:5306/xxtenant#/editbook/7190/edit/saved#%2Fmybooks

und von dort sein, ich bin Klick Browser umleiten Taste zurück zu http://localhost:5306/xxtenant#/accessdenied#%2Fmybooks%23%252Fmybooks und da ich die Strecke wie .otherwise({ redirectTo: '/accessdenied' }) angegeben haben

Jeder kann mir bitte helfen, warum die '/mybooks' wird hinzugefügt, um die URL beim Klicken zurück Schaltfläche?

AngularJS Version 1.4.8 und Angular-Strecke Version 1.4.3

Hallo Bearbeitung der Post, da ich den Grund dafür, weil ich

Das Problem geschieht geschehen gefunden Ich rufe $location.path('/mybooks'); wenn irgendwelche Änderungen auf der Seite bearbeiten Seite Ich werde die Rückseite oder $locationchangestartevent verhindern und ein Popup zum Speichern oder Abbrechen der Änderungen anzeigen. Beim Speichern oder Abbrechen rufe ich die Standort-URL auf, die der Benutzer versucht hat zu gehen. unten ist mein Code,

function init() { 
    onRouteChangeOff = $scope.$on('$locationChangeStart', routeChange); 
} 


function routeChange(event, newUrl, oldUrl) { 
    var form = $scope.createbookForm; 
    if (form.$dirty || $scope.MediaSelected || $scope.ImageSelected || $scope.TrainingTypeSelected) { 
     var modalInstance = $uibModal.open({ 
      animation: $scope.animationsEnabled, 
      templateUrl: '/scripts/angular/src/modal.html', 
      controller: 'ModalInstanceCtrl', 
      size: 'sm', 
      resolve: { 
       modalOptions: function() { 
        return $scope.modalOptions; 
       } 
      } 
     }); 
    } 

    modalInstance.result.then(function (returnVal) { 
     if (returnVal) { 
      if ($scope.isValidForSavePopUp) {      
       $scope.saveClass(form); 
      } 
      onRouteChangeOff(); 
      $location.path($location.url(newUrl).hash());//here the issue 
     } 
    }); 
    event.preventDefault(); 
    return; 
} 

Während die $location.path($location.url(newUrl).hash()); seine Umleiten richtig aufrufen, aber das Hinzufügen% 2f und den Wert von $location.url(newUrl).hash() Es funktioniert richtig, wenn ich

Answer 1

Werfen Sie einen Blick Beratung Bitte $window.location.href = newUrl;

verwenden um $ locationProvider.html5Mode (...) finden Sie weitere Informationen unter $locationProvider

aktiviert - {boolean} - (default: false) Wenn "true", wird history.pushState verwendet, um URLs zu ändern, wenn sie unterstützt werden. In Browsern, die pushState nicht unterstützen, wird auf Pfade mit Hash-Präfix zurückgegriffen.

Bedenken Sie, dass bei Verwendung von $ locationProvider.html5Mode sowohl der Browser als auch der Server diese Art der Navigation unterstützen sollten.

Es gibt zwei Dinge, die getan werden müssen:

1. Konfigurieren von $ locationProvider

   angular.module('app', []) 
       .config(function ($routeProvider, $locationProvider) { 
        $routeProvider 
         .when('/home', { 
          templateUrl: '/home.html', 
          controller: homeController 
         }) 
         .when('/about', { 
          templateUrl: '/about.html', 
          controller: aboutController 
         }) 
   
        // use the HTML5 History API 
        $locationProvider.html5Mode(true); 
       }); 
   

2. Einstellung unserer Basis für relative Links

   <!doctype html> 
   <html> 
   
   <head> 
       <meta charset="utf-8"> 
   
       <base href="/"> 
   </head> 
   <html> 
   

Wenn Sie verwenden .NET für back e nd. Dies kann für die Datei web.config nützlich sein.

<system.webServer> 
     <handlers> 
     <remove name="ExtensionlessUrlHandler-Integrated-4.0" /> 
     <remove name="OPTIONSVerbHandler" /> 
     <remove name="TRACEVerbHandler" /> 
     <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" /> 
     </handlers> 

     <rewrite> 
     <rules> 
      <rule name="AngularJS Routes" stopProcessing="true"> 
      <match url=".*" /> 
      <conditions logicalGrouping="MatchAll"> 
       <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /> 
       <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /> 
       <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" /> 
      </conditions> 
      <action type="Rewrite" url="/" /> 
      </rule> 
     </rules> 
     </rewrite> 

    </system.webServer>