vue路由的两种模式，hash与history

2024-05-18 09:38

1. vue路由的两种模式，hash与history

vue路由的两种模式，hash与history
  
       对于Vue 这类渐进式前端开发框架，为了构建SPA（单页面应用），需要引入前端路由系统，这也就是Vue-router存在的意义。前端路由的核心，就在于——— 改变视图的同时不会向后端发出请求。
  
    一、为了达到这个目的，浏览器提供了以下两种支持：
  
        1、hash ——即地址栏URL中的#符号（此hsah 不是密码学里的散列运算）。
  
           比如这个URL：http://www.abc.com/#/hello, hash 的值为#/hello。它的特点在于：hash 虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash不会重新加载页面。
  
        2、history ——利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法。（需要特定浏览器支持）
  
             这两个方法应用于浏览器的历史记录站，在当前已有的back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改是，虽然改变了当前的URL，但你浏览器不会立即向后端发送请求。
  
     history模式，会出现404 的情况，需要后台配置。
  
     二、404 错误
  
           1、hash模式下，仅hash符号之前的内容会被包含在请求中，如 http://www.abc.com, 因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回404错误；
  
           2、history模式下，前端的url必须和实际向后端发起请求的url 一致，如http://www.abc.com/book/id 。如果后端缺少对/book/id 的路由处理，将返回404错误。

2. vue路由hash和history

  SPA ，即 单页面应用 (Single Page Application)。就是只有一张 web页面的应用。单页应用程序 (SPA) 是加载单个html页面并在 用户与应用程序交互时 动态更新该页面的web应用程序。浏览器一开始会加载必需的html、css和 js ，所有的操作都在这张页面上完成，都由js来控制
   对于现代开发的项目来说，稍微复杂一点的SPA，都需要用到 路由 。而 vue-roter 正是 vue 的路由标配，且 vue-router 有 两种模式 ：  hash  和  history  。
    hash  模式是一种把前端路由的路径用井号  #  拼接在真实  url  后面的模式。当井号  #  后面的路径发生变化时，浏览器并不会重新发起请求，而是会触发  onhashchange  事件。
    下面用一个网址来演示以上属性： 
    history API  是  H5  提供的新特性，允许开发者 直接更改前端路由 ，即更新浏览器  URL  地址而 不重新发起请求 。
    hash  与  history  在浏览器下刷新时的区别：
    正常页面浏览 
    改造H5 history模式 
   HTML5新增的API：
   主要有以下特点：
   对于  history  来说，确实解决了不少  hash  存在的问题，但是也带来了新的问题：
   在实际的项目中，如何对这两者进行选择：

3. Vue-router History 模式相关配置

  vue-router  默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。
   如果不想要很丑的 hash，我们可以用路由的  history 模式 ，这种模式充分利用  history.pushState  API 来完成 URL 跳转而无须重新加载页面。
   当你使用 history 模式时，URL 就像正常的 url，例如  http://yoursite.com/user/id ，也好看！
   不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问  http://oursite.com/user/id  就会返回 404，这就不好看了。
   所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个  index.html  页面，这个页面就是你 app 依赖的页面。
    注意 ：下列示例假设你在根目录服务这个应用。如果想部署到一个子目录，你需要使用  Vue CLI 的  publicPath  选项 (opens new window) 和相关的  router  base  property (opens new window) 。你还需要把下列示例中的根目录调整成为子目录 (例如用  RewriteBase /name-of-your-subfolder/  替换掉  RewriteBase / )。
   除了  mod_rewrite ，你也可以使用   FallbackResource  (opens new window) 。
   对于 Node.js/Express，请考虑使用  connect-history-api-fallback 中间件 (opens new window) 。
   在你的  firebase.json  中加入：
   给个警告，因为这么做以后，你的服务器就不再返回 404 错误页面，因为对于所有路径都会返回  index.html  文件。为了避免这种情况，你应该在 Vue 应用里面覆盖所有的路由情况，然后再给出一个 404 页面。
   或者，如果你使用 Node.js 服务器，你可以用服务端路由匹配到来的 URL，并在没有匹配到路由的时候返回 404，以实现回退。更多详情请查阅  Vue 服务端渲染文档 (opens new window) 。

Vue-router History 模式相关配置

4. Vue Router开启history模式

 众所周知，向我这样务实的人，自然不会因为好看而去使用 history 模式，毕竟不同的服务器要做不同的配置，懂的自然懂，我也不觉得 hash  丑
   然而，  hash 是用来指导浏览器动作的，对服务器端完全无用，在做登录鉴权中，就不得不使用 history  
    mode: "history", 想当年我使用 Vue Cli 时，到这就完事了...   .
   然而，运气不好的我们可能会遇到 找不到index.html的错误，因为本地的webpack-dev-server也要配置，不存在的资源统一返回index.html 
   然而，运气不好的我们可能会遇到   
                                           
   突然发现页面加载 index.js 的方式是这样的
                                           模板 index.html  中加上了
    因为生产环境会引用云上面的文件，所以尽管本地会报错，但生产环境不会 ，我想要不就这么算了，然而平静下来越想越气，想起了我之前用过 Vue Cli ，于是仔细对比下配置   
                                           
   加上  publicPath:"/"  就·可以了。
   其实可以看到这个问题确实有很多变相解决的方式，在状态不好时，是完全可以放一放的，有时候越是想解决，越是会陷入逻辑的死循环，反正我是这样
   为什么我觉得是运气不好的，因为这个项目的结构和 Vue Cli 生成的几乎一摸一样，但是却像是特意把 webpack-dev-server 的配置删除一样，刚开始拿到后，发现不支持热更新，报错还退出，然后在 package.json 加上一条命令就好了...
   不过这种机会也是可遇不可求，磕磕绊绊中学到了很多，清晰了不少。
   不知道有赞那边是出于什么样考虑，很多项目给到的架子都是这样，突然想到有赞开发者工具不支持热更新可能也是这种方式导致的。