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

相关推荐
程序员JerrySUN30 分钟前
深入理解C++编程:从内存管理到多态与算法实现
开发语言·c++·算法
神里流~霜灭1 小时前
数据结构:二叉树(一)·(重点)
数据结构·c++·算法·链表·贪心算法·二叉树·
VT.馒头1 小时前
【力扣】2666. 只允许一次函数调用——认识高阶函数
javascript·算法·leetcode·职场和发展
祈澈菇凉1 小时前
解释什么是受控组件和非受控组件
前端·javascript·react.js
周Echo周1 小时前
10、STL中的unordered_map使用方法
c++·哈希算法·散列表
徐小黑ACG1 小时前
使用vite新建vue3项目 以及elementui的使用 vite组件问题
前端·javascript·elementui
糕冷小美n2 小时前
Electron打包文件生成.exe文件打开即可使用
前端·javascript·electron
重整旗鼓~2 小时前
向量数据库milvus
人工智能·算法·机器学习·向量数据库
puppy0_02 小时前
【万字长文】前端如何处理计算密集型操作(数据量10w+)
前端·javascript
reverie.Ly2 小时前
递归算法(5)——深度优先遍历(4)决策树
c++·算法·决策树·深度优先