vue-router介绍以及历史模式404问题

vue-router实现原理

​ 路由这个概念早期是后端开发人员提出来的,在传统的模版引擎中,我们经常可以看到如下网址:

1
http://www.xxx.com/login

​ 在vue-router中我们有两种路由模式hashhistory。这两种模式都属于浏览器的自身特性,利用这两个特性,通过调用浏览器提供的接口来实现路由的功能。简单来说路由就是用来跟后端服务器进行交互的一种方式,通过不同的路径,来请求不同的资源,请求不同的页面是路由的其中一种功能。

​ 但是在vue-router中我们还有一种模式叫abstract。该模式支持所有javascript运行模式。如果发现没有浏览器的API,路由会自动强制进入这个模式,在此篇文章中不做过多解释。

​ 随着ajax的技术的流行,我们能够通过不刷新浏览器页面的情况下进行数据的交互操作,甚至更高级的单页面应用——SPA,能够办到不仅仅是页面交互无刷新,还可以是页面跳转无刷新,因此在现如今的前端开发中也就有了路由的概念,但是在2014年前,大家都是通过hash来实现路由的。

hash介绍

hash模式路由使用的是URLhash值来作为路由,该模式的路由地址中会存在#号,能够支持所有的浏览器,并且兼容IE8。该模式背后的原理是onhashchange,在window上我们能够通过编写方法监听该事件。

#号后面的hash值的变化,并不会导致浏览器向服务器发出请求,浏览器不发出请求,就不会刷新页面。同时hash的变化会出发onhashchange时间,通过这个事件我们就会知道hash值发生了哪些变化,通过这些变化来实现页面部分内容的操作。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>test</title>
<style>
#bg-color {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="bg-color"></div>
<script>
window.location.hash = 'yellow'
window.onhashchange = (event) => {
console.log(event.oldURL, event.newURL)
let hash = location.hash.slice(1)
let hash1 = window.location.hash
console.log(hash, hash1)
document.getElementById('bg-color').style.backgroundColor = hash
}
</script>
</body>
</html>

1552403988863

history介绍

​ 在h5发布之后,多出了pushStatereplaceState两个API,通过这两个API可以改变链接地址且不发送请求,同时多出一个popstate事件。历史模式路由可以分为三大部分,分别是切换、修改、拦截,并且改模式的路由只能兼容到IE10

history不同于hash的地方在于,hash是拿来做页面定位的,如果拿来做路由,锚点功能就不能用了,而且hash传参是基于URL的,如果传递复杂的数据会有体积的限制,而history不仅可以把数据放入到URL中,也可以将数据存放在一个特定的对象中。

相关API
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
window.history.go(-2); // 后退两次
window.history.go(2); // 前进两次
window.history.back(); // 后退
window.history.forward(); // 前进
window.history.lengthk(); // 查看当前历史堆栈中的页面数量
window.history.pushState(state, title, url)
// state: 需要保存的数据,这个数据在触发popstate事件时,可以在event.state里获取
// title:标题,基本没用,一般传 null
// url:设定新的历史记录的 url。新的 url 与当前 url 的 origin 必须是一樣的,否则会抛出错误。url可以是绝对路径,也可以是相对路径
window.history.replaceState(state, title, url)
// 与 pushState 基本相同,但她是修改当前历史记录,而 pushState 是创建新的历史记录
window.addEventListener("popstate", () => {
// 监听浏览器前进后退事件,pushState 与 replaceState 方法不会触发
})

history模式下的404问题

​ 对于vue项目的开发环境下,我们使用历史模式路由是不会存在问题的,因为我们使用的是node服务器,dev中已经配置好了,但是我们在生产环境对项目打包后部署在nginx上的时候,点击刷新或者其他操作的时候有可能会出现404页面的问题,遇到这种问题我们可以在nginx中增加如下配置信息就可以解决:

1
2
3
4
5
6
7
8
9
location / {
root /data/nginx/html;
index index.html index.htm;
if (!-e $request_filename) {
rewrite ^/(.*) /index.html last;
break;
}
}
------本文结束,感谢您的阅读,如有问题请通过邮件方式联系作者------