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

相关推荐
passer__jw7675 分钟前
【LeetCode】【算法】283. 移动零
数据结构·算法·leetcode
光影少年7 分钟前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
Ocean☾11 分钟前
前端基础-html-注册界面
前端·算法·html
Rattenking12 分钟前
React 源码学习01 ---- React.Children.map 的实现与应用
javascript·学习·react.js
顶呱呱程序19 分钟前
2-143 基于matlab-GUI的脉冲响应不变法实现音频滤波功能
算法·matlab·音视频·matlab-gui·音频滤波·脉冲响应不变法
爱吃生蚝的于勒41 分钟前
深入学习指针(5)!!!!!!!!!!!!!!!
c语言·开发语言·数据结构·学习·计算机网络·算法
羊小猪~~1 小时前
数据结构C语言描述2(图文结合)--有头单链表,无头单链表(两种方法),链表反转、有序链表构建、排序等操作,考研可看
c语言·数据结构·c++·考研·算法·链表·visual studio
王哈哈^_^1 小时前
【数据集】【YOLO】【VOC】目标检测数据集,查找数据集,yolo目标检测算法详细实战训练步骤!
人工智能·深度学习·算法·yolo·目标检测·计算机视觉·pyqt
星沁城1 小时前
240. 搜索二维矩阵 II
java·线性代数·算法·leetcode·矩阵
熊的猫1 小时前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js