持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第13天，点击查看活动详情

前言

两种路由方式都是客户端的路由方式，路径发生变化时，都不会向服务器发起请求，而是通过js监听路径变化，渲染不同内容

hash 路由

表现形式：以#开始，#后面的为路由地址
原理：hash路由模式是基于锚点，以及 onhashchange 事件

history 路由

表现形式：正常的url模式，/ 路由
原理：history模式是基于h5中的history API，以及监听 popstate 事件

• history.pushState() -- 注：IE10以后才支持
• history.replaceState()
  解释：当调用pushState/replaceState方法时，浏览器不会向服务器发起请求，只会改变url地址，并且把地址记录到浏览器历史记录中

比较：调用原始 history.push() 方法时，路径会发生变化，并且向服务器发起请求

popstate事件： 当调用 history.pushState() 或 history.replaceState() 时不会触发popstate事件，只有在做出浏览器动作时，才会触发该事件，比如用户点击浏览器的回退按钮（或者在Javascript代码中调用history.back()）

history模式在服务端的配置：
history模式需要服务端的支持，否则单页面应用直接访问带参数的地址时会返回404，因为服务器端并没有这个地址，路由都是由客户端完成的。
实现方式一：node服务中：
使用node处理history模式的包：connect-history-api-fallback

// 示例代码
const path = require('path')
const history = require('connect-history-api-fallback') // history模式包
const express = require('express') // express服务框架

const app = express()

// 注册处理history模式的中间件
app.use(history())
// 处理静态资源的中间件，网站根目录 ../root
app.use(express.static(path.join(__dirname, '../root')))

// 启动服务
app.listen(3000, () => {
  console.log('start...')
})

执行原理：找不到带参数的路由地址，就直接返回index.html的内容，交给客户端去解析

实现方式二：nginx服务中：
配置conf文件

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

总结

整理不易，如果有帮到你，给个赞吧！👍

往期精彩文章

🌟 轻松理解前端模块化
🌟 ECMAScript新特性汇总，面试别在答错
🌟 Promise 面试常考手写方法汇总
🌟 Promise 常见误区
🌟 js 柯里化艺术