再谈location与history之跳转转态监控—router的两种实现模式

刷新当前页面更新内容

location更新URL地址，

使用location对象可以通过很多方式来改变浏览器的位置，每次修改location的属性(hash除外)，页面都会以新URL重新加载。 

浏览器的历史记录中就会生成一条新记录，用户通过单击"后退"按钮都会导航到前一个页面。

要禁用这种行为，可以使用location.replace(URL)方法

结果虽然会导致浏览器位置改变，但不会在历史记录中生成新记录。在调用replace()方法之后，用户不能回到前一个页面、、

location常用方法：

• location.assign(url) ： 加载 URL 指定的新的 HTML 文档。 就相当于一个链接，跳转到指定的url，当前页面会转为新页面内容，可以点击后退返回上一个页面。
• location.replace(url) ： 通过加载 URL 指定的文档来替换当前文档 ，这个方法是替换当前窗口页面，前后两个页面共用一个
• 窗口，所以是没有后退返回上一页的
• location.reload()：方法用于刷新当前文档。如果把该方法的参数设置为 true，强制刷新当前页面。如果有 POST 数据提交，则会重新提交数据；如果想要刷新当前的页面，又避免 POST 数据提交，可以使用：window.location.replace( location.href );

不刷新当前页面更新内容

前端改变浏览器地址而不刷新页面，有两种方法：改变hash（只能改变hash值） 和html5 History改变浏览器地址。

虽然通过hashchange等一系列操作也能满足router需求，但是hash router 对搜索引擎不友好(hash值不会发送给服务端，静态化页面时难以保持路径一致)，难以追踪用户行为。  

从HTML5开始提供了对history栈中内容的操作。history.pushState()和history.replaceState()方法，他们分别可以添加和修改历史记录条目。这些方法通常与window.onpopstate配合使用。像angularJS Vue react 等router模块都提供有 hash模式和HTML5 History 模式

history常用API：

• history.pushState(state,title,URL)：向浏览器新增一条历史记录，但是不会刷新、重载当前页面，且不会触发hashchange事件，参数如下：
  • state为JS对象，可以用作携带信息(限制640k)，popstate事件的state属性包含该历史记录条目状态对象的副本。
  • title：目前来看没啥用(未来可能会用到)，一般为空或null，
  • URL：即要更改页面的URL，且必须同源，不能跨域；类似location =URL（但仅是更新浏览器地址栏地址，不会加重URL）
• history.replaceState(state,title,URL):更改当前浏览器的历史记录，即把当前执行此代码页面的记录给替换掉，参数与pushState相同；
• history.back()、history.forward()、history.go()：分别为前进一个历史，后退一个，history.go(Number)，其中Number可正可负，即向前或向后若干个记录
• history.state：返回当前页面状态参数，此参数一般由history.pushState及history.replaceState附带的state值
• history.length：返回当前页面所产生的历史记录个数，即在同一个浏览器tab下产生的历史记录；

详细的推荐查看：https://developer.mozilla.org/zh-CN/docs/Web/API/History

在history中跳转

使用back()，forward()，go()方法来完成在用户历史记录中向后和向前跳转。

在history中向后跳转

• window.history.back();
• window.history.go(-1);

向前跳转

• window.history.forward();
• window.history.go(1);

当前页

• window.history.go(0);

添加和修改历史记录中的条目 

使用history.pushState()可以改变referrer(引用)，它在用户发送XMLHttpRequest请求时在HTTP头部使用，改变state后创建的XMLHttpRequset对象的referrer都会被改变。因为referrer是标识创建XMLHttpRequest对象时this所代表的window对象中document的URL。

pushState()

JavaScript修改浏览器URL地址栏，不刷新页面（vue、react项目服务端渲染，可以保持访问地址一致）

var stateObject = {};
var title = "zhoulujun.cn test page";
var newUrl = "/zhoulujun/demo/test";
history.pushState(stateObject,title,newUrl);

推荐阅读：https://router.vuejs.org/zh/guide/essentials/history-mode.html

history事件onpopstate:

每当活动的历史记录项发生变化时， popstate 事件都会被传递给window对象。

在history.back(),history.forward(),history.go()时触发此事件，但是在history.pushState();history.replaceState();时并不会触发此事件，但事件内可以获取到state状态值

各浏览器对popstate事件是否触发有不同的表现，Chrome和Safari会触发popstate事件，而FireFox不会。

参考文章：

从了解Hash和Html5 History 到简单实现路由 https://segmentfault.com/a/1190000019991267

HTML5 history详解 https://blog.csdn.net/garrettzxd/article/details/80657281

转载本站文章《再谈location与history之跳转转态监控—router的两种实现模式》, 请注明出处：https://www.zhoulujun.cn/html/webfront/ECMAScript/js6/2016_0425_7787.html