vue hash和history的差异

  1.简单介绍 Vue Router
    (1) vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。
    传统的页面应用，是用一些超链接来实现页面切换和跳转的。至于我们为什么不能用a标签，这是
    因为用Vue做的都是单页应用，就相当于只有一个主的index.html 页面，所以标签是不起作用的，
    你必须使用 vue-router 来进行管理。

    (2) vue-router 单页面应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质就是
    建立起url和页面之间的映射关系。


  2.Vue Router 实现原理
    (1) SPA：单页面应用
    (2) SPA方式:
      单一页面应用程序，只有一个完整的页面；它在第一次加载页面时,就将唯一完整的 html 页面和
      所有其余页面组件一起下载下来，这样它在切换页面时，不会加载整个页面，而是只更新某个指定
      的容器中内容。

    (3) SPA的核心之一是: 更新视图而不重新请求页面。

    (4) 路由器对象底层实现的三大步骤即：
      - 监视地址栏变化 
      - 查找当前路径对应的页面组件
      - 将找到的页面组件替换到 router-vieW 的位置


    3.Hash(vue 的路由默认)
      3.1 简述：
        (1)
          - 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载 
          - hash（#）是 URL 的锚点，代表网页中的一个位置，当单单改变 # 后的部分，浏览器只会滚动到相应位置，
            不会重新加载网页
          - hash 不会发起网络请求。每一次改变 # 后的部分，都会在浏览器的访问历史中增加一个记录，使用 "后退" 
          按钮，就可以回到上一个位置，所以说 hash 模式通过锚点值的改变，根据不同的值，渲染指定 DOM 位置的不同数据。

        (2)
          # 符号本身以及它后面的字符称之为 hash，可通过 window.location.hash 属性读取


      3.2 特点：
        - hash 虽然出现在URL中，但不会被包括在 HTTP 请求中。因此，改变 hash 不会重新加载页面
        - 可以为 hash 的改变添加监听事件：
            window.addEventListener("hashchange", fncEvent, false)
        - 每一次改变 hash（window.location.hash），都会在浏览器的访问历史中增加一个记录
        - url 带一个 # 号。



    4.history
      4.1 简述
        (1) history 是路由的另一种模式，url 中不带 # 。只需要在响应的 router 配置规则时,加上即可

        (2)利用了HTML5中新增的 pushState() 和 replaceState() 方法。这两个方法应用于浏览器的历史记录栈，
        在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修
        改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。


      4.2 特点
        - 路由跳转不需要重新加载页面。
        - 不带 # 在大部分人看来要比 hash 路由好看许多。
        - 兼容性没有 hash 好，会在下面展开说明


    5.生产环境问题及解决
      设置了history模式的项目部署到服务器中后。此时如果我们刷新页面的话，浏览器会发送新的请求，如
      www.test.com/home, 如果后端服务器没有 /home 对应的接口，那么就会返回404。

      生产环境 刷新 404 的解决办法可以在 nginx 做代理转发，在 nginx 中配置按顺序检查参数中的资源是否存在，
      如果都没有找到，让 nginx 内部重定向到项目首页。