Vue-router Hash模式与History模式

vue-router 中Hash模式和History 模式的区别（客户端路由实现方式）

当路径发生变化时，不会向服务端发送请求，通过js监听路由路径的变化，渲染不同的内容

表现形式的区别

Hash模式

https://xxx.xxx.com/#/playlist?id=3102961863（#号后面内容为路由地址）

History模式

https://xxx.xxx.com/playlists/3102961863（history模式需要服务端配置，无#和?号等特殊字段）

原理的区别

Hash模式是基于锚点，以及onhashChange事件通过锚点的值作为路由地址，当地址发生变化后，触发onhashChange事件
History模式是基于HTML5中的HistoryAPI
- history.pushState() IE10 以后才支持 pushState方法与push方法区别：
  - push方法路由会发生变化但需要向服务器发送请求
  - pushState只会修改路由地址，并将地址记录到浏览器的历史记录
- histtory.replaceState()

History 模式配置

在vue项目中配置history模式
```
const router = new VueRouter({
mode: 'history',
routes
})
```
本地启动可以正常访问所有页面由于vue-cli处理了相应的配置，访问或者刷新都能够正常渲染页面，但如果页面上线到服务端无在服务端配置history模式，在刷新页面时就会出来404无法找到页面的情况，主要是因为vue是单页面应用，在服务端配置访问时只有一个html文件，在首次访问时，会向服务端发送请求，得到首页页面，进行路由跳转时也会正常访问，但是如果已通过路由渲染新页面后，再次刷新就会出来404无法显示页面，因为刷新时会重新发送请求，请求当前页面内容，而当前页面没有在服务器中配置导致无法访问

node.js环境下配置history模式

const path = require('path')
// 导入处理 history 模式的模块
const history = require('connect-history-api-fallback')
// 导入 express
const express = require('express')

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

// 开启服务器，端口是 3000
app.listen(3000, () => {
console.log('服务器开启，端口：3000')
})

nginx 服务器配置

// conf/nginx.conf文件中配置
location / {
            root   html;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html
        }

工作流程：先在服务器中找相对应路径下的文件index.html，如果没有找到就会默认返回网站根目录下的index.html,浏览器在接收到页面后，再去判断当前的路由地址，在客户端解析相对应的路由地址的组件