路由hash和history的区以及应用

拨云见日

本篇文章主要是，介绍路由hash和history的区以及应用在对服务端的要求

hash和history都是客户端路由的实现方式，也就是当路径发生变化的时候，不会向服务器发送请求，使用js监视路径的变化

根据不同的地址渲染不同的内容，如果需要服务器的内容的话，使用Ajax发起请求

hash和history表现形式的区别

hash形式的路径中带着#号,#号后面的内容作为地址，通过问号携带url参数，这种模式看起来不是很美观，

路径携带和数据无关的符号，比如#和？,如下所示

hash模式：https://music.163.com/?from=infinity#/song?id=5308028

history模式：https://vue-loader.vuejs.org/zh/

history模式就是普通的url，这种模式需要服务端的支持

hash和history原理的区别

Hash模式基于瞄点，通过锚点的值作为路由地址，当地址发生变化后触发onhashchange事件，

在这里根据路由在页面上呈现不同的内容，history模式基于HTML5中API

history.pushState()可以实现客户端路由，

history.replaceState()可以实现客户端路由

history.pushState() IE10以后才支持的,IE9有兼容问题，这一点需要注意，

history.pushState()和push方法的区别是，history.push()当调用这个方法的时候路径会发生变化，这个时候要向服务器发送请求，

history.pushState()不会向服务器发送请求，只会改变浏览器地址栏中的地址，并且把这个地址记录到历史记录里面，

history模式的使用

History需要服务器的支持

在单页面应用中，服务端不存在http://www.testurl.com/login 这样的地址会返回找不到该页面

在服务端应该除了静态资源都返回单页面应用的index.html

history在node服务器中的应用

//node服务器代码如下
const path = require('path')
// 导入处理 history 模式的模块
const history = require('connect-history-api-fallback')
// 导入 express
const express = require('express')

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

// 开启服务器，端口是 3000
app.listen(3000, () => {
  console.log('服务器开启，端口：3000')
})
//说明： 在浏览器来回切换路由，并不会向history.pushState()服务器发送请求，但是如果刷新页面的话，浏览器会想服务器发送请求

//但是服务器并没有对应的url，这时候服务器就会返回404页面，这样就有问题了

node解决这个问题有专门的插件

// 导入处理 history 模式的模块
const history = require('connect-history-api-fallback')
app.use(history()) //支持history模式 ,这就可以支持history模式

node服务器支持history原理

开启history模式之后，再次刷新页面，这时候浏览器向服务器发送请求，服务器接收这个请求过后，

服务器会判断当前请求的页面我这边没有，没有的话默认把index这个页面返回给浏览器 ，

浏览器接收到这个页面会判断有没有这个路由地址，浏览器看到当前的路由地址，并且渲染到页面上，

这时页面上就不会显示404/can not GETURL了，

nginx服务器配置history模式

nginx服务器配置如下

1、从官网下载nginx压缩包

2、把压缩包解压到Cpan根目录，C\nginx-1.18.0文件夹

3、打开命令行，切到目录C\nginx-1.18.0下

nginx命令如下

用命令行打开C\nginx-1.18.0

1、start nginx  //启动服务器

2、nginx -s reload 重启服务器 //修改了服务器，需要重启服务器

3、nginx -s stop 停止服务器

运行start nginx ， 命令并没有任何反应，打开浏览器输入localhost:8080 出现 welcome to nginx就代表服务器启动成功了

//说明： 在浏览器来回切换路由，并不会向history.pushState()nginx服务器发送请求，

//但是如果刷新页面的话，浏览器会想nginx服务器发送请求

//但是服务器并没有对应的url，这时候nginx服务器就会返回404页面，

//nginx支持history 需要修改配置文件

//找到nginx → conf 打开nginx.conf

local / {
    root  html;
    index index.html index.htm;
    try_files $url $url/ /index.html;//重要
}

try_files意思是试着访问文件 
 
$url 从当前路径寻找对应的文件

$url/ 从当前网站根目录寻找文件

/index.html 如果都不到就返回index.html文件

然后浏览器解析路由地址，浏览器把解析到的结果渲染到页面上，这样就不会显示404了

谢谢观看，如有不足，敬请指教