更改 URL 而不删除 Angularjs 中的历史记录

Posted 2023-05-09

【中文标题】更改 URL 而不删除 Angularjs 中的历史记录

【英文标题】：Change URL without removing history in Angularjs

【发布时间】：2018-05-22 11:38:36

【问题描述】：

我正在使用 'ui.router' 和 '$state.go' 来重定向页面，

我的项目的“导航栏”看起来像这样。

<ul class="sidebar-menu">
    <li class="active">
        <a ui-sref="root.menu(brand_id:nav.brand_id)">
            <i class="fa fa-building-o"></i>
            <span> nav.navInfo.menu.auth_name</span>
        </a>
    </li>
    <li>
        <a ui-sref="root.picture(brand_id:nav.brand_id)">
            <i class="fa fa-book"></i>
            <span> nav.navInfo.picture.auth_name</span>
        </a>
    </li>
    ...
</ul>

每个页面首先显示有项目列表的表格。

让我们假设一个情况。

当我在“菜单”页面时，我搜索一个关键字。

按照我的代码，URL 会发生变化，包括关键字。

例如，这就像

搜索前：

/menu?page=1&offset=0&limit=10

搜索后：

/menu?page=1&offset=0&limit=10&searchKey=menu_name&searchString=pizza

.

.

然后，我单击“导航栏”中的“菜单”选项卡以再次获取整个列表。

此时，我想使用触发器ui-sref 或$(location) 或其他方式更改URL。

使用$(location).attr('href', url)时，改网址成功

但如果我点击浏览器后退按钮，浏览器历史记录不会保持。

我也使用了window.location.href、window.location.replace，但结果相同。

在这种情况下如何维护历史记录？

我已准备好尝试各种方式的建议！

.

.

附言。

如果这还不够解释，请给我反馈。

实际上，我不知道如何更具体地解释这一点。 :(

我已经在“js”中尝试过这个，而不是“控制器”。

我在 'js' 中这样做并没有什么特别的原因。

只是我认为这可能更简单。

提前致谢！

.

.

更新

我可以通过单击“导航栏”上的每个选项卡来更改页面。

这可以使用ui-sref 并且完美。

我的主要问题是，例如，当“.active”类在“菜单”选项卡中时，

再次单击“菜单”选项卡，ui-sref 不起作用。

所以我使用了$location、window 或 'js' 中的东西，

在这之后我得到的是'删除的历史'。

当我点击“菜单”标签时，我想让页面处于初始化状态。

点击标签前：

/menu?page=1&offset=0&limit=10&searchKey=menu_name&searchString=pizza

点击标签后：

/menu?page=1&offset=0&limit=10

还有一个，我手动将?page=1&offset=0&limit=10 放入URL，

所以我只需要触发ui-sref 或更改网址而不删除历史记录。

【参考方案1】：

如果您使用 Angular 路由器，请不要使用 window.location 或 $(location) 来更改页面 url 和位置。 Angular 路由器有自己的机制，即$state。

你需要先在你的控制器中注入$state然后你才能使用：

$state.go('yourStateHere');

这将在您的浏览器中保留所有跟踪历史记录。

注意：

确保在app.js 中明确定义了您的状态，我的意思是您需要为搜索页面定义一个相应的状态，同时考虑所有搜索参数。

更多详情，您可以查看：

ui-router Quick Reference

。

StateProvider Reference

。

AngularJS Routing Using UI-Router

tutorial。

【讨论】：

也许你对我的问题理解不够。 T.T 我认为这是因为我的解释不力。感谢您的关注，请再次查看我的问题。我刚刚更新了。 :)

【参考方案2】：

您是否尝试过使用角度服务$location？ 例如：

$location.path("/main_page");

那么你可能需要使用$scope.$applyAsync();

更新（在下面的 cmets 之后）

services.service("$way", ["$location", function ($location) 
    var self = this;
    var lastBack;            //last page where you was
    this.way = new Array();
    var LIMIT_LENGTH = 30;   //limit of route history
    var curScope = null;     //current scope
    var active = true;       //is service active

    this.step = function (path, $scope) 
        curScope = $scope;
        if (lastBack != path) 
            lastBack = null;
            this.way.push(path);
            if (this.way.length > LIMIT_LENGTH) 
                this.way.shift();
            

        
    

    this.goBack = function () 
        if (active) 
            var path = back();
            lastBack = path;
            if (path != "/") 
                $location.path(path);
                curScope.$applyAsync();
            
        
    

    this.setActive = function (_active) 
        active = _active;
    

    this.refresh = function () 
        this.way = new Array();
    

    function back() 
        if (self.way.length > 1) 
            self.way.pop();
            Log.o("WAY_BACK", self.way);
            return self.way[self.way.length - 1];
        
    
]);

例子：

$way.step("/blog", $scope);  //add page to path
$way.step("/main", $scope);  //add page to path
$way.goBack(); // now you on /blog page

【讨论】：

感谢您的回答！如何申请$scope.$applyAsync()？我会在<a> 标签中添加ng-click 吗？

也许你可以在你的路由函数中捕捉到它。但是ng-click 也必须工作。 （您只需要检查 - 它可能需要一个布尔返回来批准位置更改）

如果您遇到问题，我可以建议另一种解决方法：尝试创建自己的服务来控制位置。我会用这个例子更新我的答案。

我看到了您的更新答案。这是手动保存历史记录的方法，不是吗？还有比你更简单的方法吗？