Vue路由的实现原理

一、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
    })
复制代码

转载于:https://juejin.im/post/5d11aa79f265da1b971a81ad