Browser кнопки назад перенаправление на предыдущую страницу и добавление маршрута к URL каждый раза, маршрутизация выполняются с angulrjs

Question

ниже Url показывает книгу перечисления пользователя под арендатором xxtenant в следующей ссылке

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

конфигурация маршрута для указанного выше ниже,

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

страницы листинга у меня есть одна кнопка, чтобы редактировать данные книги, если я нажимаю кнопку браузер будет перенаправлять на http://localhost:5306/xxtenant#/editbook/7190/edit/saved

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

}) 

Если я нажимаю браузер кнопку назад с этой страницы редактирования, он перенаправляется на предыдущую страницу и URL стал, как показано ниже, http://localhost:5306/xxtenant#/mybooks#%2Fmybooks.

Итак, если кнопка нажмите редактирования, он перенаправляет на страницу редактирования и URL-адрес будет http://localhost:5306/xxtenant#/editbook/7190/edit/saved#%2Fmybooks

и оттуда я щелкая браузер кнопка назад будет перенаправлять http://localhost:5306/xxtenant#/accessdenied#%2Fmybooks%23%252Fmybooks и поскольку я определил маршрут как .otherwise({ redirectTo: '/accessdenied' })

Любой может мне помочь, почему '/mybooks' добавляется к URL-адресу при нажатии кнопки «Назад»?

AngularJS Version 1.4.8 и радиально-Route Version 1.4.3

Привет Редактирование пост с тех пор, я нашел причину случиться это,

Проблема происходит потому, что я 'm вызывает $location.path('/mybooks'); если какие-либо изменения на странице книги редактирования я буду препятствовать обратному или $locationchangestartevent и показать всплывающее окно для сохранения или отмены изменений. При сохранении или отмене я назову URL-адрес местоположения, который пользователь попытался выполнить. Ниже мой код,

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

Призывая к $location.path($location.url(newUrl).hash()); его перенаправление должным образом, но при добавлении% 2f и значение $location.url(newUrl).hash() Он работает нормально, если я использую $window.location.href = newUrl;

Пожалуйста, советы

Answer 1

Посмотрите на $ locationProvider.html5Mode (...) найти дополнительную информацию по адресу $locationProvider

enabled - {boolean} - (по умолчанию: false) Если true, будет полагаться на history.pushState, чтобы изменить URL-адреса, где они поддерживаются. Вернется к хэш-префиксным путям в браузерах, которые не поддерживают pushState.

Имейте в виду, что при использовании $ locationProvider.html5Mode браузер и сервер должны поддерживать такую ​​навигацию.

Есть 2 вещи, которые нужно сделать:

1. Настройка $ 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. Настройка нашей базы для относительных ссылок

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

Если вы используют .NET для back e без обозначения даты Это может пригодиться в файле web.config.

<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>