hash路由模式与history路由模式

1.hash路由模式

hash模式 ：使用 URL 的 hash 来模拟一个完整的 URL, 其显示的网络路径中会有 “#” 号

hash 虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash后刷新, 也不会有问题

hash模式示例: http://localhost:8080/#/home     http://localhost:8080/#/user

原理： hashChange

2.history模式

history模式： 美化后的hash模式，路径中不包含“#”。依赖于Html5 的 history api

由于改变了地址, 刷新时会按照修改后的地址请求后端, 需要后端配置处理, 将地址访问做映射, 否则会404

history模式示例: http://localhost:8080/home     http://localhost:8080/user

原理： popState, pushState()

3.vue项目修改路由模式

改成history模式非常简单，只需要将路由的mode类型改成history即可。在src/router/index.js中

// 创建路由实例
const createRouter = () => new Router({
  mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  // 指定路由规则
  routes: [
    ...constantRoutes // 静态路由, 首页
  ]
})

4.在history模式下打包后的代码刷新后会报 404 报错

将history模式下打包的代码放置服务器运行，出错:浏览器一刷新就会出现页面丢失的问题

原因：

第一发请求，浏览器默认会在url后面加个 ’ / ',访问到服务器的index.html文件，随后返回index.html文件给浏览器，浏览器拿到数据后开始渲染，渲染发现index.html文件里有外链的js和css ，发起第二次请求拿到某个js文件，拿到js文件后发现发现js文件里有个逻辑，没有登录就调到login

刷新后就表示直接去服务器中找login页面，服务里面是没有login页面的，所以就会跳转404报错

5.为什么hash模式不会出现404报错

hash模式用#号隔开，浏览器发送请求时服务器会忽略#后面的内容

6.history模式下的解决方案

解决方案：让后端配置处理, 将地址访问做映射！
在nodejs环境中布署应用，跳转上一篇博客

为什么在开发中用history模式就不会有影响？

之所以岁月静好,是因为有人在负重前行！

开发中脚手架其实已将帮我们做好了处理，所以开发中不会受影响