js 路由跳转方法

前端页面代码展示

    <button onclick="page()">页面路由</button>
<button onclick="hash()">hash跳转</button>
<button onclick="backWay()">backWay</button>
<button onclick="pushState()">pushState</button>
<button onclick="replaceState()">replaceState</button>

　　效果

 

 

 

 

 页面路由代码

function page() {
   window.location.href = 'http://www.taobao.com';
}

　　效果

 

 

 hash跳转代码

function hash() {
	window.location = '#hash';
	 // hash变化时触发
	 window.onhashchange = function(){
	     console.log('current hash:', window.location.hash);
	 }
}

　　效果

 

 

backWay 跳转方法

// 实现后退功能
function backWay() {
	// history.back();
	history.go(-1); 
}

　　

pushState跳转方法

function pushState() {
 	history.pushState(null, null, '?path1');
}

　　效果

 

 

replaceState跳转方法

function replaceState() {
	history.pushState(null, null, '?path2');
}

　　效果