vue-router 两种模式

路由的两种模式

一、更新视图但是不重新请求页面，是前端路由原理的核心之1，目前在浏览器环境中这一功能的实现主要有两种：

（1）默认是hash模式，路由上方的路径是用#表示
（2）history是利用URL中的路径

2.如何设置路由模式

const router=new VueRouter({
    mode:'history',
    routes:[...]
})

3.mode区别

1.mode：hash多了一个#
2.mode：history

4.hashHistory

hash(#)的作用是加载URL中只是网页中的位置，#后面的hash值，可通过window.location.hash获取

特点：

1. hash不会被包括在http请求中，对服务器端完全无用，因此，改变hash不会重新加载页面。
2. 可以为hash的改变添加监听事件：window.addEventListenter(“hashchange”,funcRef,false)
3. 每一次改变hash(window.location.hash),都会在浏览器访问历史中增加一个记录
   利用hash的以上特点，就可以实现前端路由"更新视图但不重新请求页面"的功能了

hashHistory有两种方法：一个是push，另一个是replace。
hishHistory.push()将新路由添加到路由到浏览器访问历史的栈项
hishHistory.replce()并不是将新路由添加到浏览器访问历史的栈项，而是替换掉当前的路由。

二、HTML5History

HTML5开始History提供了两个新的方法：pushstate，replacestate使我们可以对浏览器历史记录栈进行修改。

window.history.oushstate()
window.histiry.replacestate()

监听地质变化
在HTML5History的构造函数中监听popstate(window.onpopstate)
popstate事件会在点击后后退、前进按钮时触发，前提是真的发生了页面跳转，而是在由history.pushstate或者history.replacestate形成的历史节点中前进后退。

注意：页面第一次加载的时候，浏览器不会触发popstate事件。