Vue, App与我（五）

Vue, App与我（五）

• Big-man今天非常的生气，至于为什么?那就是本身的app上没有添加页面跳转记住上一页面的位置功能，上网查询了很多的资料，说得都比较的模糊和不全，所以决定自己写一下。用自己理解的语言。

---

• h5的History：
• javascript: history.go(-1);或者javascript: history.back();这个是h5自带页面跳转模型（返回上一页），但是这个跳转会出现url链接整个刷新，所以也就不会记录住上一次浏览的位置以及滑动条位置。所以这里需要去介绍一下h5.history()的其他属性。

---

• History介绍:
• History接口允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录。
• 属性：
• History接口不继承于任何属性。刚看到这句话的时候， Big-man真的很不相信这句话，但是它的原话是The History interface doesn’t inherit any property.既然是官方文档给出的答复，我暂时还是相信一下吧。接下来开始介绍一下具体属性：

---

• History.length :
• 返回一个整数，该整数表示会话历史中元素的数目，包括当前加载的页。例如，在一个新的选项卡加载的一个页面中，这个属性返回1。

---

• History.current:
• 返回一个代表session历史记录中活动的项目URL的 DOMString,这个属性永远对web内容不可用并且已经不再被任何浏览器支持。可以使用Location.href来代替它。

---

• History.next()
• 返回表示会话历史记录中下一个项目的URL的DOMString。 此属性从不可用z在网页内容中，并且也不受浏览器支持。

---

• History.previous
• 返回表示会话历史中先前项目的URL的DOMString。 此属性从不可用于网页内容，并不受其他浏览器支持。

---

• History.scrollRestoration
• 允许Web应用程序在历史导航上显式地设置默认滚动恢复行为。此属性可以是自动的（auto）或者手动的（manual）。

---

• History.state
• 返回一个表示历史堆栈顶部的状态的值。这是一种可以不必等待popstate 事件而查看状态而的方式。

---

• 方法：
• History接口不继承任何方法。这是官方文档给出的答案，当时我是无法接受的，接口不继承方法，Big-man自我感觉不太可能吧。所以暂时不相信这部分内容。

---

• History.back()
• 前往上一页, 用户可点击浏览器左上角的返回按钮模拟此方法. 等价于 history.go(-1).刚开始的时候，Big-man已经在论述中进行了讲解。
• 注意：当浏览器会话历史记录处于第一页时调用此方法没有效果，而且也不会报错。
• 这里可以观察一下效果图：

---

---

---

---

• History.forward()
• 在浏览器历史记录里前往下一页，用户可点击浏览器左上角的前进按钮模拟此方法. 等价于 history.go(1)。
• 注意：当浏览器历史栈处于最顶端时( 当前页面处于最后一页时 )调用此方法没有效果也不报错。

---

• History.go():
• 通过当前页面的相对位置从浏览器历史记录( 会话记录 )加载页面。比如：参数为-1的时候为上一页，参数为1的时候为下一页. 当整数参数超出界限时( 译者注:原文为When integerDelta is out of bounds)，例如: 如果当前页为第一页，前面已经没有页面了，我传参的值为-1，那么这个方法没有任何效果也不会报错。调用没有参数的 go() 方法或者不是整数的参数时也没有效果。( 这点与支持字符串作为url参数的IE有点不同)。

---

• History.pushState()
• 将给定的数据推送到具有指定标题的会话历史堆栈（如果提供）的URL。 数据被DOM处理为不透明; 您可以指定可序列化的任何JavaScript对象。 请注意，Firefox目前忽略标题参数; 有关更多信息，请参阅操纵浏览器历史记录。
• 注意：在·Gecko 2.0（Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1）·中，通过Gecko 5.0（Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2），传递的对象使用JSON进行序列化。 从Gecko 6.0（Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3）开始，使用结构化克隆算法序列化对象。 这允许更多种类的物体被安全地通过。

---

• History.replaceState()
• 更新历史堆栈上的最新条目以具有指定的数据，标题和（如果提供的话）URL。 数据被DOM处理为不透明; 您可以指定可序列化的任何JavaScript对象。 请注意，Firefox目前忽略标题参数; 有关更多信息，请参阅操纵浏览器历史记录。
• 在Gecko 2.0（Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1）中，通过Gecko 5.0（Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2），传递的对象使用JSON进行序列化。 从Gecko 6.0（Firefox 6.0 / Thunderbird 6.0 / SeaMonkey 2.3）开始，使用结构化克隆算法序列化对象。 这允许更多种类的物体被安全地通过。

---

• HTML History模式:
• vue-router默认hash模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。
• 如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

• 当你使用history模式，URL就像正常的url,例如http://yoursite.com/user/id, 也好看！
• 不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问http://oursite.com/user/id就会返回404, 这就不好看了。
• 所以呢？你要在服务器端增加一个覆盖所有情况的候选资源：如果URL匹配不到任何静态资源，则应该返回同一个index.html页面，这个页面就是你app依赖的页面。

---

• 后端配置代码：

---

• Apache

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

---

• nginx

location / {
  try_files $uri $uri/ /index.html;
}

---

• Node.js (Express)
• Express

---

• 警告：
• 给个警告，因为这么做以后，你的服务器就不再返回 404 错误页面，因为对于所有路径都会返回 index.html 文件。为了避免这种情况，你应该在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 页面。

---

• vue <keep-alive></keep-alive>:
• 这个不是业务的要求，但是看到每次进入页面就重新渲染DOM然后再获取数据更新DOM，觉得作为一个前端工程师有必要优化下的加载逻辑，正好vue提供了keep-alive的功能，所以就试用了下。当然，干任何事儿都不会一帆风顺的，在路上的磕磕碰碰在所难免，故在此记录下遇到的问题，希望看到这篇文章的人能有所帮助。ps：这个也没多难。

---

• HTML部分：

<template>
  <div cl