1. 通过hash 模式进行路由的跳转
// 1. 通过hash 模式进行路由的跳转
// hash 模式会在url后面加上#
// 获取reter-view 的dom
const routerViewEl = ("router-view")[0];
// 监听URl的改变
("hashchange",() => {
switch(){
case "#/home":
= "首页";
break;
case "#/about":
= "关于";
break;
default:
= "";
}
})
2. 通过history 模式进行路由的跳转
// 2. 通过history 模式进行路由的跳转
// 获取reter-view 的dom
const routerViewEl = ("router-view")[0];
// 获取所有的a元素, 自己来监听a元素的改变
const aEls = ("a");
for( let el of aEls ){
("click", e => {
();
const href = ("href");
({}, "", "href");
urlChange();
})
}
// 执行返回操作的时候,依然来到urlChange
("popState", urlChange)
// history 模式下监听URl的改变
function urlChange() {
switch(){
case "/home":
= "首页";
break;
case "/about":
= "关于";
break;
default:
= "";
}
}
history 的六种模式可以改变URl而不刷新页面
- replaceState: 替换原来的路径
- pushState: 使用新的路径
- popState: 路径的回退
- go: 向前或向后改变路径
- forward: 向前改变路径
- back: 向后改变路径