87,904
社区成员
发帖
与我相关
我的任务
分享angularjs中怎么实现返回上一页，页面内容不会刷新？
一个查询的页面，得到查询结果，我点到了分页的第5页。然后点击查询结果跳转至查询结果的
详情页面。这时在详情页面，点击返回按钮，怎么能做到返回到查询页面的第5页而不是第一页。
用的是angularjs,页面间的切换用的是视图。
详情页面。这时在详情页面，点击返回按钮，怎么能做到返回到查询页面的第5页而不是第一页。
用的是angularjs,页面间的切换用的是视图。
...全文
请发表友善的回复…
发表回复
qq_37335375 2017-09-27
- 打赏
- 举报
history.go(-1)不能再单页面上应用的
TIANKONG22STAR 2017-07-13
- 打赏
- 举报
楼主解决了吗，我也遇见这个问题了。求助啊
楠小南 2017-06-09
- 打赏
- 举报
你切换用的是视图。 可以把视图切换回来啊啊
比如你列表页 点击详细 切换到详细页 。那么你肯定可以从详细页 切换回列表页啊
反正就是视图的切换而已 根本不用去管什么参数不参数的。因为是视图的切换 不是页面的跳转
lanshs 2017-06-09
- 打赏
- 举报
刚刚查了一下，应该没问题
lanshs 2017-06-09
- 打赏
- 举报
js初始化的时候，获取地址上的锚。例如xxx.html#1
锚参数1指定页码为1
如果没有锚参数，则页码为1
当点击翻页，进行翻页的同时，把页码写到地址上，这时候浏览器地址栏加上锚参数（给window.location.href加上锚参数页面应该不刷新的吧，额~）
进入内容页面之后，返回上一页，返回的是带锚参数的url，就可以实现返回指定页面了。
只是假设，要尝试一下。要是给地址加上锚参数，页面刷新了就尴尬了（应该不刷新，因为页内锚链接是不刷新的）。我也没试过，但准备试。
题主试一下有什么问题再提出来讨论。
本人QQ-554433626 2017-06-09
- 打赏
- 举报
history.go(-1)
# 单页面和多页面开发及应用
# 单页面：
- 什么是单页面：单页面是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入。
- 跳转仅加载一次，用于PC和公务网站
- 页眉 -> 第一页，第二页， 第三页 -> 脚本
# 单页面技术：
-AngularJS是一个全面的客户端侧框架。其模板基于双向UI数据绑定。数据绑定是一种自动方法，在模型改变时更新视图，以及在视图改变时更新模型。其HTML模板在浏览器中编译。编译步骤创建纯HTML，浏览器将其重新渲染到实时视图。该步骤会在随后的页面浏览中重复。在传统的服务器端HTML编程中，控制器和模型等概念在服务器进程中进行交互以产生新的HTML视图。在AngularJS框架中，控制器和模型状态在客户端的浏览器中维护，从而使生成新页面不依赖与服务器的交互。
-Ember.js是基于模型-视图-控制器（MVC）软件架构模型的客户端侧JavaScript Web应用程序框架。它允许开发人员在一个框架中通过常用的习惯用语和最佳实践来创建可伸缩的单页面应用程序。该框架提供丰富的对象模型、声明性双向数据绑定、计算属性，Handlebars.js提供的自动更新模板，以及一个路由器管理应用程序状态。
-Meteor.js是一个专门为单页应用设计的全栈（客户端-服务器）JavaScript框架。它具有比Angular、Ember或ReactJS更简单的数据绑定特性且使用--Distributed Data Protocol和一个发布/订阅来自动将数据更改传播到客户端，无需开发人员编写任何同步代码。全栈反应确保从数据库到模板的所有层都可以在必要时自动更新。诸如服务器端渲染等生态系统包则解决搜索引擎优化（SEO）等问题。
-Aurelia是一个适用于移动设备、桌面和网页的JavaScript客户端框架。它类似AngularJS，但更新、更符合标准，并采用模块化举措。Aurelia使用下一代ECMAScript编写。
-Vue.js（通常称为Vue）是一个用于构建用户界面的开源渐进式JavaScript框架。
-React（通常写为React.js或ReactJS）是一个构建用户界面的JavaScript函式庫。它由Facebook、Instagram和个人开发者以及企业社区维护。React最大的优势是易于使用——基本上任何熟悉HTML的开发人员都可以创建React应用程序。另一个所称的优势是可能使用相同的技术堆栈来同时创建Web与移动应用程序。有多家公司使用React和Redux库来让开发人员创建复杂但可扩展的Web应用程序。
-Fulcro是一个全栈库，它采用Netflix的Falcor，Facebook的Relay和Om Next对反应性，功能性，数据驱动软件进行改编的数据驱动原则。
-单页面做seo（搜索引擎优化）：
-根据部分进行优化为每个关键字创建一个
或或每个关键字并为其分配一个适当的ID,该页面上的内部链接将链接至ID。
-优化页面速度对于单页网站SEO来说至关重要。
- 做了seo 以后，单页面还是单页面
# 单页面优点：
-减小服务器压力。 如果不用单页面（spa），如果每次切换页面的时候，都向服务器发送一个请求，服务器返回一个html文件；但是如果使用了单页面，在切换时，不需要请求服务器，只要通过本地的js来切换即可。并且服务器端就不需要配置路由，完全做到了前后端分离
-增强用户体验，增加app的使用流畅性。 使用spa之后，页面在切换的时候非常流畅，完全没有那种不断刷新的感觉，而是非常快的就有了响应，因为js运行速度很快，所以js在做本地路由的时候，就会非常快。
-单页应用没有页面之间的切换，就不会出现“白屏现象”,也不会出现假死并有“闪烁”现象。
-单页应用相对服务器压力小，服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍。
-良好的前后端分离。后端不再负责模板渲染、输出页面工作，后端API通用化，即同一套后端程序代码，不用修改就可以用于Web界面、手机、平板等多种客户端。
-单页面缺点：
-首次加载耗时比较多。
解决办法：可以采用基于HTTP Chunk 的首屏数据渐进式预加载方案，该方案总体减少了单页应用1.2s的首屏呈现时间。首屏数据渐进式预加载的优化思路也得到了体现： 优化首屏数据加载节点的速度。 预先加载首屏数据，使得多个串行节点并行化。
-SEO问题，不利于百度，360等搜索引擎收录。
解决办法：可以采用prerender服务，它拿到请求够，直接在服务端的一个js engine里，运行这个HTML(就像浏览器做的那样)，直到内容动态填完之后，再广播一个事件告诉phantomjs“内容已经好了，可以返回给爬虫了”，这样爬虫就拿到了一份完整的HTML，就和在浏览器里渲染完的一样。目前流行的框架都有对应的服务器渲染框架
-如有造成Css命名冲突。
解决办法：我们可以使用Sass、LESS和Stylus等CSS预处理器，在一定程度上可以解决该问题。
-前进、后退、地址栏、书签等，都需要程序进行管理，页面的复杂度很高，需要一定的技能水平和开发成本高。
# 多页面：
-什么是多页面：每一次页面跳转的时候，后台服务器都会给返回一个新的html文档，这种类型的网站也就是多页网站，也叫做多页应用
- 跳转需要刷新所有资源，用于app 或 客户端
- 页眉 -> 第一页 -> 脚本，页眉 -> 第二页 -> 脚本，页眉 -> 第三页 -> 脚本
-多页面优点：给用户提供一个完美的视觉方向，重点是没有很多的菜单，简洁明了的SEO管理。由于可以针对每页一个关键字优化应用程序
-多页面缺点：后端和移动客户端不能同时使用，前端和后端开发紧密结合。开发变得相当复杂。开发人员需要为客户端和服务器端使用框架。这导致应用程序开发时间更长。
# 区别：
-组成：单页面由一个外壳页面和多个页面组成， 多页面由多个完整页面组成
-css（资源公用）：单页面为共用，只需要外壳部分加载，多页面则不共用，每个页面单独加载
-刷新方式：单页面页面局部更改或刷新，多页面整页刷新
-url模式：单页面 a.com/#/pageone 多页面 a.com/pageone.html
-用户体验：单页面页面切换快，用户体验良好，多页面加载缓慢，流畅度不够，用户体验较差
-转场动画：单页面容易实现，多页面无法实现
-数据传递：单页面容易，多页面需要依赖url传参，或cookie，localSrorage等
-搜索引擎优化：单页面需要单独方案，实现较为困难，不利于SEO搜索，可利用与SSR优化，多页面实现方法容易
-适用范围：单页面高要求的体验度，追求页面的流畅，多页面追求高度支持搜索引擎的应用
-开发成本：单页面较高，需要专业的框架，多页面较低，但页面重复代码较多
-维护成本：单页面相对容易，双页面相对复杂
