十二、【Vue-Router】路由器的两种工作模式

十二、路由器的两种工作模式

1、一切都得从地址栏的#说起

从 # 开始一直到结尾这段内容被称为 hash值

作用：hash值不会包含在 http 请求中，即：hash值不会传到后台服务器

栗子：

​ 后台给的接口： http://x.x.x.x:8080/peiqi

​ 前台发送请求：http://x.x.x.x:8080/peiqi/#/abc/def/lalala

​ 后台接到的是：http://x.x.x.x:8080/peiqi/

​ 此时后台可以正常响应！

​ 但若没了 hash，请求就变成了 http://x.x.x.x:8080/peiqi/abc/def/lalala

​ 后台接收到的请求是： http://x.x.x.x:8080/peiqi/abc/def/lalala

​ 你很荣幸的获得了后台返回的 404 状态！

---

2、路由器的两种工作模式

1. hash ( 默认值 )
   1. 地址中永远带着#号，不美观
   2. 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法
   3. 兼容性较好
2. history
   1. 地址干净，美观
   2. 兼容性和hash模式相比略差
   3. 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题

---

3、改为 history 工作模式

router/index.js

//创建并暴露一个路由器
export default new VueRouter({
    mode: 'history', // 通过 mode 配置，默认值是 hash
	routes:[
        // ...略
	]
})

新开一个页签看效果！

---

4、项目写完了打包！

npm run build

打包就是把项目文件翻译成纯 html、css、js 文件

就是这个 disk 文件夹

我们进入 disk 看一下它的生态环境

挺激动的，点开 index.html 就傻眼了，啥也没有呢？！！！

打包完的项目需要部署到服务器上才能访问！

---

5、history 模式部署上线后的问题

点了一顿之后，突然刷新了下页面

上面提到的 404 已经映入眼帘了！

---

6、解决 history 模式的问题

这就需要后端工程师进行处理了，没错小白还特么是个后端工程师！