如何让浏览器的返回按钮返回到之前的URL？（angular ui-router）

20 浏览
0 Comments

如何让浏览器的返回按钮返回到之前的URL？（angular ui-router）

我正在使用angular ui router进行前端路由，并且似乎无法让浏览器的返回按钮带我回到最近的URL。

让我来演示一下。

假设我从这里开始

/#/myapp/

然后经过一些点击，我动态调整了我的URL，变成了

 /#/myapp/12345

假设我在页面上点击了一个日期选择器

/#/myapp/12345?start=2016-01-21&end=2016-01-28

我可以通过使用$scope的函数和$location.url来实现这一点。

很棒。到目前为止还不错。

假设我通过点击离开了这个页面

 我的应用

根据我的路由设置的方式，

myApp.config([
    '$stateProvider', '$urlRouterProvider',
    function($stateProvider, $urlRouterProvider) {
        $stateProvider.state('myapp',
            url : '/myapp/*id?start&end',
            templateUrl : '<我的模板路径>',
            controller : '<我的控制器名称>'
        );
        // 更多路由
        $urlRouterProvider.otherwise('/myapp/');
    }
]);

会默认回到初始状态

/#/myapp

好的，到目前为止还不错。然而，当我点击浏览器的返回按钮时，我被带回到了

/#/myapp

而不是我期望的

/#/myapp/12345?start=2016-01-21&end=2016-01-28

我只能猜测，在浏览器的历史记录中没有捕获到我在页面上导航时生成的中间URL...这似乎是有道理的。我该如何让浏览器识别这些中间步骤，以便我可以正确地回溯？

0

2 答案

0 Comments

问题的出现原因是用户想要通过浏览器的返回按钮回到之前的URL页面，但是当前的页面并没有实现这个功能。

解决方法是使用window.history.back();来实现回到上一页的功能。

0
0 Comments

问题出现的原因是URL中的参数顺序不同可能被认为是不同的URL，导致无法正确返回到上一个URL。解决方法是通过以下四个步骤：

1. 确保URL是唯一的。即使参数顺序不同，也需要将它们视为不同的URL。

2. 创建一个会话服务，用于跟踪用户的浏览历史。

3. 创建一个状态历史，用于存储用户的状态。

4. 使用位置服务来控制浏览器的返回按钮。

你可以通过检查参数的顺序来确定URL是否是唯一的。如果不同顺序的参数会导致不同的页面内容，则可以将其视为不同的URL。可以使用$location服务来处理URL，并根据参数的不同顺序将其添加到状态历史中或不添加到状态历史中，具体取决于你希望如何返回。

以上是解决问题的方法，你可以参考下面的链接获取更详细的解答：[点击这里](https://stackoverflow.com/questions/22247294)

0