hash模式和history模式实现路由跳转

1. 通过hash 模式进行路由的跳转

// 1. 通过hash 模式进行路由的跳转
// hash 模式会在url后面加上# 

// 获取reter-view 的dom
const routerViewEl = document.getElementsByClassName("router-view")[0];
// 监听URl的改变
window.addEventListener("hashchange",() => {
    switch(location.hash){
        case "#/home":
            routerViewEl.innerHTML = "首页";
            break;
        case "#/about":
            routerViewEl.innerHTML = "关于";
            break;
        default: 
            routerViewEl.innerHTML = "";
    }
})

2. 通过history 模式进行路由的跳转

// 2. 通过history 模式进行路由的跳转
// 获取reter-view 的dom
const routerViewEl = document.getElementsByClassName("router-view")[0];
// 获取所有的a元素, 自己来监听a元素的改变
const aEls = document.getElementsByTagName("a");
for( let el of aEls ){
    el.addEventListener("click", e => {
        e.preventDefault();
        const href = el.getAttribute("href");
        history.pushState({}, "", "href");
        urlChange();
    })
}


// 执行返回操作的时候，依然来到urlChange
window.addEventListener("popState", urlChange)

// history 模式下监听URl的改变
function urlChange() {
    switch(location.pathname){
        case "/home":
            routerViewEl.innerHTML = "首页";
            break;
        case "/about":
            routerViewEl.innerHTML = "关于";
            break;
        default: 
            routerViewEl.innerHTML = "";
    }
}

history 的六种模式可以改变URl而不刷新页面

1. replaceState: 替换原来的路径
2. pushState: 使用新的路径
3. popState: 路径的回退
4. go: 向前或向后改变路径
5. forward: 向前改变路径
6. back: 向后改变路径