2017-02-23 20 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> 
相关问题