js修改hash的方法

关键:

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触发。

相关推荐
ytttr87335 分钟前
matlab通过Q学习算法解决房间路径规划问题
学习·算法·matlab
海的诗篇_1 小时前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
go54631584652 小时前
修改Spatial-MLLM项目,使其专注于无人机航拍视频的空间理解
人工智能·算法·机器学习·架构·音视频·无人机
油泼辣子多加2 小时前
【Torch】nn.BatchNorm1d算法详解
算法
nlog3n2 小时前
基于 govaluate 的监控系统中,如何设计灵活可扩展的自定义表达式函数体系
算法·go
IT古董2 小时前
【第三章:神经网络原理详解与Pytorch入门】01.神经网络算法理论详解与实践-(2)神经网络整体结构
pytorch·神经网络·算法
ThetaarSofVenice2 小时前
垃圾收集相关算法Test
java·jvm·算法
黄瓜沾糖吃2 小时前
大佬们指点一下倒计时有什么问题吗?
前端·javascript
温轻舟2 小时前
3D词云图
前端·javascript·3d·交互·词云图·温轻舟
小陈phd3 小时前
langchain从入门到精通(二十八)——RAG优化策略(六)集成多种检索器算法实现混合检索及问题转换总结
算法