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而不刷新页面
- replaceState: 替换原来的路径
- pushState: 使用新的路径
- popState: 路径的回退
- go: 向前或向后改变路径
- forward: 向前改变路径
- back: 向后改变路径