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

时间:2025-01-22 13:02:25

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而不刷新页面

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

相关文章