一、mode
- 利用URL中的hash（“#”）
- 利用History interface在 HTML5中新增的方法
二、hash（默认）==>hashHistory
1、hashHistory.push
将新路由添加到浏览器访问历史的栈顶
2、hashHistory.replace
替换掉当前的路由
3、hashchange
function random () { var num = parseInt(Math.random() * 100) document.getElementById('num').innerHTML = num window.location.hash = "num=" + num } random(); window.addEventListener('hashchange', function (e) { var str = e.newURL.split('#')[1] document.getElementById('num').innerHTML = str.split('=')[1] })复制代码 三、history（vue-cli3会让你选择是否默认history）==>History interface
难道history才是主流吗？对我而言，只是因为hash太丑了！！！
- History.back()：前往上一页，等价于history.go(-1)
- History.forward()：前往下一页，等价于history.go(1)
- History.go()：通过当前页面的相对位置从浏览器历史记录（会话记录）加载页面。
参数为-1的时候为上一页，参数为1的时候为下一页。当整数参数超出界限时，例如：如果当前页为第一页，前面已经没有页面了，我传参的值为-1，那么这个方法没有任何效果也不会报错。调用没有参数的go()方法或者不是整数的参数时也没有效果
从HTML5开始，History interface有进一步修炼：pushState(),replaceState()不仅是读取了，还可以对浏览器历史记录栈进行修改。
1、 history.pushState(state,title,URL)
向浏览器新增一条历史记录，但是不会刷新当前页面（不会重载），其中state为对象，可以用作携带信息用，title：目前来看没啥用一般为空或null，URL：即要更改页面的URL，且必须同源，不能跨域；
2、 history.replaceState(state,title,URL)
更改当前浏览器的历史记录，即把当前执行此代码页面的记录给替换掉，参数与pushState相同
3、popstate（前进后退时调用）
function random () { var num = parseInt(Math.random() * 100) document.getElementById('num').innerHTML = num window.history.pushState({num: num},'', num); } random(); window.addEventListener('popstate', function (e) { console.log('active') document.getElementById('num').innerHTML = e.state.num })复制代码