js 路由跳转方法

前端页面代码展示

?

1 2 3 4 5

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

　　效果

 

 

 

 

 页面路由代码

?

1 2 3

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

　　效果

 

 

 hash跳转代码

?

1 2 3 4 5 6 7

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

　　效果

 

 

backWay 跳转方法

+ View Code?

1 2 3 4 5

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

　　

pushState跳转方法

?

1 2 3

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

　　效果

 

 

replaceState跳转方法

?

1 2 3

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

　　效果