vue路由的两种方式的实现原理

2020-05-10  本文已影响0人  小银哥

1.hash模式:这里的模式,主要是,我们可以通过,window.location.hansh.,获取这个hash值,可以监听window.onhanshchange事件,在hansh的值,发生改变的时候执行不同地逻辑。

2.history模式,主要是根据html5最新的api,我们可以通过,包括了pushState,replaceState两个方法,这两个方法接收三个参数:stateObj,title,url

history.pushState({color:'red'}, 'red', 'red'})

window.onpopstate = function(event){

//这里是获取事件中的转态就是历史路由保持地实例

  console.log(event.state)

  if(event.state && event.state.color === 'red'){

    document.body.style.color = 'red';

  }

}

//这里是后退

history.back();

//这里是前进

history.forward();

上一篇 下一篇

猜你喜欢

热点阅读