Browser back button redirecting to previous page and appending the route to url each times, routing is done with angulrjs

问题

the below Url shows the books listing of a user under a tenant xxtenant in the following url

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

the route configuration for the above is below,

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

the listing page i have one button to edit the book details, if i click the button the browser will redirect to 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
    }

})

If i click browser back button from this edit page, it is redirecting to the previous page and the url became like below, http://localhost:5306/xxtenant#/mybooks#%2Fmybooks.

So if click edit button, it is redirecting to the edit page and the url will be http://localhost:5306/xxtenant#/editbook/7190/edit/saved#%2Fmybooks

and from there i'm clicking browser back button will redirect to http://localhost:5306/xxtenant#/accessdenied#%2Fmybooks%23%252Fmybooks and since i have specified the route like .otherwise({ redirectTo: '/accessdenied' })

Anyone can please help me why the '/mybooks' is getting added to the url while clicking back button?

AngularJS Version 1.4.8 and Angular-Route Version 1.4.3

Hi Editing the post since, i found the reason to happen this,

The issue is happening because I'm calling $location.path('/mybooks'); if any changes on the edit book page I'll prevent the back or $locationchangestartevent and show a popup to save or cancel the changes. On the save or cancel, I'll call the location url the user tried to go. below is my 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;
}

While calling the $location.path($location.url(newUrl).hash()); its redirecting properly but adding %2f and the value of $location.url(newUrl).hash() It is working properly if i use $window.location.href = newUrl;

Please advice

回答1:

Have a look at $locationProvider.html5Mode(...) find more info at $locationProvider

enabled – {boolean} – (default: false) If true, will rely on history.pushState to change urls where supported. Will fall back to hash-prefixed paths in browsers that do not support pushState.

Have in mind that when using $locationProvider.html5Mode both browser and the server should support that kind of navigation.

There are 2 things that need to be done:

1. Configuring $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. Setting our base for relative links

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

If you are using .NET for back end. This might come in handy for the web.config file.

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

来源：https://stackoverflow.com/questions/42409803/browser-back-button-redirecting-to-previous-page-and-appending-the-route-to-url