Vue路由的原理及模式

Posted 2020-12-07 litongbky

核心：更新视图不重新请求页面。

路由的hash模式和history模式。

看上去，hash模式就比history模式多了一个#。无论是hash模式还是history模式，在发生改变的时候，浏览器都会新增一个记录，我们就是通过这个记录来实现更新视图但是重新请求页面。

hash("#") 的作用是加载 URL 中指示网页中的位置。

# 本身以及它后面的字符称职位 hash，可通过 window.location.hash 获取。

特点：

1、hash虽然包含在URL当中，但是不在http请求当中，所以改变hash值，并不会触发重新请求页面；

2、hash的改变事件可以监听：

window.addEventListener("hashchange",funcRef,false)；

3、hash值（可以通过window.localtion.hash获取）每一次发生改变，浏览器都会在历史记录当中新增一个记录。

hash（HashHistory）有两个方法，push()和replace()。

push()方法将新路由添加到历史记录的栈顶，replace()方法则是把当前路由替换成新的路由。

history（html5History）是浏览器历史记录栈提供的接口，通过back()、forward()、go()等方法，我们可以读取浏览器历史记录栈的信息，进行各种跳转操作。

从 HTML5开始，History interface 提供了2个新的方法：pushState()、replaceState() 使得我们可以对浏览器历史记录栈进行修改：

　　window.history.pushState(stateObject,title,url)

　　window.history,replaceState(stateObject,title,url)

history的两个方法和hash的两个方法并没有什么区别

history监听地址变化：window.onpopstate

 

两种模式的比较：

1、history设置的新URL可以是同源的任意URL，而hash模式只能够修改#后面的部分，故只可设置与当前同文档的URL；

2、history可以添加任意类型的数据到记录当中，hash模式只能够添加短字符串；

3、history模式可以额外添加title属性，提供后续使用；

4、history模式则会将URL修改得就和正常请求后端的URL一样,如后端没有配置对应/user/id的路由处理，则会返回404错误。