js修改hash的方法

闻人放歌2024-07-21 14:40

关键：

javascript 复制代码

window.onhashchange = (event) => {
  // do something
}

hash变化包括

js修改hash
手动修改url的hash
浏览器前进、后退

js修改hash:

javascript 复制代码

location.href = "#user";

在vue-router等路由组件中如何实现history模式呢？

关键函数：history.pushState

javascript 复制代码

docment.getElementById('btn1').addEventListener('click', function() {
	const state = {.name: 'page1' };
	console.log('切换路由到page1')；
	history.pushState(state, '', 'page1');
})

// 监听浏览器前进、后退
window..onpopstate = (event) => {
	console.log('onpopstate', event.state, location.pathname);
}

注意，history模式需要注意需要后端配合！如果不做浏览器兼容性处理，在history模式下切换了路由，此时再刷新，会模式去找page1这个页面，导致找不到该页面。所以我们需要在服务器配置返回index.html，路由由history.pushState触发。