这是我参与「第四届青训营」笔记创作活动的第3天

一、路由器工作模式介绍

vue中路由器的工作模式有两种，一种是hush（哈希）模式，另一种是history（历史记录）模式，而在默认情况下，路由器的工作模式为hash模式。

1、hash模式
hash模式下的地址会有一个#号，#之后的地址即为hash值,希值不会作为url的一部分发送给服务器。

图片.png
2、history模式
该模式下路径直接拼接在端口号之后，会随着http请求一起发送给服务器，让服务器对其进行解析

图片.png

二、如何配置路由模式

在配置路由规则时加入一个mode属性，他的值有hush和history两种，而默认为hush。

图片.png

三、两种模式的特点

1、hush模式

地址中永远带着#号，不美观。
若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。
兼容性较好。

2、history模式

地址干净，美观。
兼容性和hash模式相比略差。
应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题。

解决404报错问题：
解决这个问题的办法有多种，比如使用nginx,或者修改nodejs后端配置，这里以nidejs为例。
1、安装第三方包，npm install --save connect-history-api-fallback。
2、使用第三方包，修改server.js，如下：

const express = require("express");
const app = express();
const history = require("connect-history-api-fallback");
app.use(history());
app.use(express.static(__dirname+"/static"));
app.get("/person",(request,response) => {
    response.send({
        name:"Nicholas",
        gender:'Male'
    })
})
app.listen(3000,(err) =>{
    if(!err) console.log("服务器启动了！");
})

3、修改配置后需要重启服务器，执行node server命令

四、总结

在使用history模式的时候路径会随着http请求发给服务器，项目打包部署时，如果后端没做配置，页面刷新，前端路径就会被当成资源去请求服务器，资源找不到就会报错404，而hash模式下，#后面的路径在网络请求时不会发送给服务器，页面刷新时也不会报错。

路由器的两种工作模式：hash模式和history模式｜ 青训营笔记