angular单页面后退如何传值

疯云林渡
  • 271

小弟用angular开发单页面应用有一段时间了,但是目前遇见了一个关于优化的问题,就是关于后退是否能否传值的问题

clipboard.png

有操作人员反映说分页的页数不会记录。点击查看或者新增的时候页面跳过去了点击返回后当前分页就变成了1.然后我当初想了想优化下,应该不难,就是离开当前页面的时候将当前页面的分页值传到其他页面,点击返回的话在传回来,结果做起来后懵逼了,他们的返回是点回退。我顿时不知道怎么能达到他们的要求。
比如这个基础商品页面,有4个跳转路由的链接,新增,修改,两个查看。他们想点击这4个路由离开这个页面返回的时候分页能记录。但是如果他们不点击返回点击其他页面在点到基础商品导航后,希望回到1.
如果是1个我认为我还能用全局判断一下写一下。但是因为每个页面都有分页,这样的想法就不行,结构和全局变量会很多,特别多。
所以我想了解下,angular这样的框架有没有所谓的后退传值的方法呢?
为了了解这个功能到底算不算细致到极致,便上了淘宝上面尝试了下,我将某个商品链接的target改成了当前页面跳转页面。但是点击返回的时候他们竟然还真的记录了。刷新了也能记录当前分页。
不得不说他们的优化细致非常的好。
敢问angular的大神们,你们遇见过这种问题吗?后退能否传值呢?

回复
阅读 5.2k
6 个回答
 var is = true;
    //分页点击事件
    vm.pageChanged = function(){
        if(is){
            var page = $location.search().page;
            typeof(page)=="undefined" ? vm.pageint = 1:vm.pageint=page;
            is = false; 
        }
       vm.skip = (vm.pageint-1)*12;
       info_list(vm.seid);
       $location.search('page',vm.pageint)
       console.log(vm.pageint)
    }

我使用的是ui-bootstrap里的分页组件。这个是它的事件。这个is的变量主要是为了区分是否第一次加载。因为这个组件的第一次会自动运行一次。和分页的事件冲突了。

楼主你可以把试一下把分页的page和每页数量limit通过$location.search()写到地址上。

我不清楚你的运用状况。

不过我觉得运用路由可以轻松解决这个问题。

vue和react分别都有vue-router和React-router

比如原来看到第四页,路径是...../index.html#!/pages/4,然后跳转到...../index.html#!/items/444444
点返回是回到第四页的。

简单说,用SPA的路由体系。

问题描述的不够清晰。

大概理解一下,当前在第四页点击某条详情进入后,再返回,导致重新调用方法,页码重新回到第一页。

这样的话,需要保存当前页码就好,不论是用 $rootScope 或者 cache 或者 localstorage……

用自己熟悉的方式保存就好了。

宣传栏