2017-02-23 21 views
0

做下面的網址顯示的書籍在以下網址瀏覽器後退按鈕重定向到前一頁,並追加到URL每個時代的路線,路由與angulrjs

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

租客xxtenant下用戶的列表

對於上述的路由配置低於,

$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'被添加到網址,而點擊後退按鈕?

AngularJS版本1.4.8和 角路由版本1.4.3

嗨編輯崗位,因爲,我發現發生這種情況的原因,

的問題發生,因爲我撥打$location.path('/mybooks'); 如果在編輯書頁上有任何更改,我會阻止後退或$locationchangestartevent,並顯示一個彈出窗口來保存或取消更改。在保存或取消時,我會打電話給用戶試圖去的位置網址。下面是我的代碼,

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;

請指點

回答

0

看一看at $ locationProvider.html5Mode(...)查找更多信息$locationProvider

enabled - {boolean} - (默認:false)如果爲true,將依賴history.pushState更改受支持的URL。將返回到不支持pushState的瀏覽器中的哈希前綴路徑。

請記住,使用$ locationProvider.html5Mode時,瀏覽器和服務器都應該支持這種導航。

有兩件事情需要做:

  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進行反饋ND。這可能會在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> 
相關問題