浏览器后退按钮重定向到上一页，并且每次都将路由附加到url，路由是使用angulrjs完成的 [英] Browser back button redirecting to previous page and appending the route to url each times, routing is done with angulrjs

问题描述

以下网址在以下网址中显示了租户xxtenant下用户的书籍清单

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

http：// localhost：5306 / xxtenant＃/ mybooks

上述路由配置如下，

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

我有一个按钮可以编辑书的详细信息，如果单击该按钮，
浏览器将重定向到
< a href = http：// localhost：5306 / xxtenant＃/ editbook / 7190 / edit / saved rel = nofollow noreferrer> http：// localhost：5306 / xxtenant＃/ editbook / 7190 / edit / saved

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
    }

})

如果我从此编辑页面单击浏览器后退按钮，它将重定向到上一页，并且URL如下所示，
http：// localhost：5306 / xxtenant＃/ mybooks＃％2Fmybooks 。

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.

所以如果单击编辑按钮，它将重定向到编辑页面，并且该URL将为 http：// localhost：5306 / xxtenant＃/ editbook / 7190 / edit / saved＃％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

然后从此处单击浏览器按钮将重定向到 http：// localhost：5306 / xxtenant＃/ accessdenied＃％ 2Fmybooks％23％252Fmybooks ，由于我已指定了 .otherwise（{redirectTo：'/ accessdenied' }）

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' })

任何人都可以帮助我为什么'/ mybooks'

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

AngularJS版本1.4.8和
Angular-Route版本1.4.3

AngularJS Version 1.4.8 and Angular-Route Version 1.4.3

嗨编辑帖子，因为我发现发生这种情况的原因，

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

之所以出现此问题，是因为我在编辑书页上进行任何更改时都呼叫 $ location.path（'/ mybooks'）;
，返回或 $ locationchangestartevent 并显示一个弹出窗口，以保存或取消更改。在保存或取消操作中，我将调用用户尝试访问的位置网址。下面是我的代码，

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

同时调用 $ location.path（$ location .url（newUrl）.hash（））; 正确重定向，但添加％2f和 $ location.url（newUrl）.hash（）
如果我使用 $ window.location.href = newUrl;

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;

请咨询

推荐答案

看看 $ locationProvider.html5Mode（...）查找更多信息位于 $ locationProvider

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

enabled – {boolean} –（默认值：false）如果为true，将依靠history.pushState更改支持的网址。将退回到不支持pushState的浏览器中的哈希前缀路径。

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.

请记住，在同时使用$ locationProvider.html5Mode时浏览器和服务器应支持这种导航。

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

需要完成两件事：

1. 配置$ locationProvider

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

设置相对链接的基础

Setting our base for relative links

<!doctype html>
<html>

<head>
    <meta charset="utf-8">

    <base href="/">
</head>
<html>

如果您使用.NET作为后端。对于 web.config 文件，这可能会派上用场。

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>

这篇关于浏览器后退按钮重定向到上一页，并且每次都将路由附加到url，路由是使用angulrjs完成的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！