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');
}

　　效果