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

相关推荐
_殊途1 小时前
《Java HashMap底层原理全解析(源码+性能+面试)》
java·数据结构·算法
工业甲酰苯胺3 小时前
TypeScript枚举类型应用:前后端状态码映射的最简方案
javascript·typescript·状态模式
珊瑚里的鱼4 小时前
LeetCode 692题解 | 前K个高频单词
开发语言·c++·算法·leetcode·职场和发展·学习方法
秋说5 小时前
【PTA数据结构 | C语言版】顺序队列的3个操作
c语言·数据结构·算法
lifallen6 小时前
Kafka 时间轮深度解析:如何O(1)处理定时任务
java·数据结构·分布式·后端·算法·kafka
liupenglove6 小时前
自动驾驶数据仓库:时间片合并算法。
大数据·数据仓库·算法·elasticsearch·自动驾驶
谢尔登7 小时前
【React Native】ScrollView 和 FlatList 组件
javascript·react native·react.js
python_tty7 小时前
排序算法(二):插入排序
算法·排序算法
然我7 小时前
面试官:如何判断元素是否出现过?我:三种哈希方法任你选
前端·javascript·算法
F_D_Z8 小时前
【EM算法】三硬币模型
算法·机器学习·概率论·em算法·极大似然估计