关键词：
根据loaction下的这个hash值变化，触发事件驱动函数来完成部分数据的加载
根据loaction下的这个hash值变化，触发事件驱动函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul
list-style: none;
margin: 0;
padding: 0;
li
float: left;
width: 120px;
height: 30px;
text-align: center;
line-height: 30px;
border: 1px solid #000;
border-left: none;
li:first-child
border-left: 1px solid #000;
.clear::after
content: "";
clear: both;
visibility: hidden;
display: block;
height: 0;
overflow: hidden;
div
width: 1000px;
height: 400px;
border: 1px solid #000;
margin-top: 10px;
a
text-decoration: none;
color: #000;
display: block;
width: 100%;
height: 100%;
</style>
</head>
<body>
<ul class="clear">
<li id="vegetable"><a href="#vegetable">蔬菜</a></li>
<li id="fruit"><a href="#fruit">水果</a></li>
<li id="meat"><a href="#meat">禽肉</a></li>
<li id="oils"><a href="#oils">粮油</a></li>
</ul>
<div id="div1"></div>
<script>
var data=
vegetable:["大白菜","青菜","白菜","茭白","莲花白","胡萝卜"],
fruit:["苹果","香蕉","菠萝","鸭梨","西瓜","荔枝"],
meat:["鸭肉","牛肉","猪肉","羊肉","鸡肉","鱼肉"],
oils:["绿豆","大米","花生油","菜籽油","橄榄油","大豆"]
// 初始化
init();
var div,prev;
function init()
// 哈希被修改时，触发事件函数
// 多次修改多次重新触发执行函数
window.onhashchange = hashChangeHandler;
div = document.getElementById('div1');
// 判断地址栏有没有哈希地址
if(!location.href.includes('#'))
location.href += "#vegetable"
console.log(location.hash.slice(1));
// changePrev(document.getElementById(location.hash.slice(1)));
// hashChangeHandler();
function hashChangeHandler()
// 每次触发时可以获取哈希值#……
// console.log(location.hash);
var temp = location.hash.slice(1)
var arr = data[location.hash.slice(1)]
// console.log(arr);
// console.log(location.hash.slice(1));
div.innerHTML = arr.join(',')
// 这里使用和上面使用的效果一样
changePrev(document.getElementById(location.hash.slice(1)));
function changePrev(elem)
if(prev)
prev.style.backgroundColor= "white"
prev = elem;
// 然后给这个标签加上样式
prev.style.backgroundColor = 'pink'
</script>
</body>
</html>
history历史状态记录
根据history.state记录，更新数据渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul
list-style: none;
margin: 0;
padding: 0;
li
float: left;
width: 120px;
height: 30px;
text-align: center;
line-height: 30px;
border: 1px solid #000;
border-left: none;
li:first-child
border-left: 1px solid #000;
.clear::after
content: "";
clear: both;
visibility: hidden;
display: block;
height: 0;
overflow: hidden;
div
width: 1000px;
height: 400px;
border: 1px solid #000;
margin-top: 10px;
</style>
</head>
<body>
<ul class="clear">
<li id="vegetable">蔬菜</li>
<li id="fruit">水果</li>
<li id="meat">禽肉</li>
<li id="oils">粮油</li>
</ul>
<div id="div1"></div>
<script>
var data=
vegetable:["大白菜","青菜","白菜","茭白","莲花白","胡萝卜"],
fruit:["苹果","香蕉","菠萝","鸭梨","西瓜","荔枝"],
meat:["鸭肉","牛肉","猪肉","羊肉","鸡肉","鱼肉"],
oils:["绿豆","大米","花生油","菜籽油","橄榄油","大豆"]
var lis,div,prev;
init();
function init()
lis = Array.from(document.getElementsByTagName('li'))
// 添加一个history历史监测
window.onpopstate = popstateHandler;
div = document.getElementById('div1')
// 给每一个li添加点击事件
for (let index = 0; index < lis.length; index++)
lis[index].onclick = clickHandler;
// 如果第一次历史状态为空，那么给所谓默认的第一个历史状态添加一个历史状态
var li = history.state? document.getElementById(history.state):lis[0]
history.replaceState(li.id,li.id)
resetData(li)
// resetData(lis[0])
// 将历史记录上的第一次null换为lis[0].id,
// history.replaceState(lis[0].id,lis[0].id)
function clickHandler()
history.pushState(this.id,this.id)
resetData(this)
function resetData(elem)
div.innerHTML = data[elem.id]
changePrev(elem)
function changePrev(elem)
if(prev)
prev.style.backgroundColor = 'white'
prev = elem;
prev.style.backgroundColor = 'pink'
function popstateHandler()
resetData(document.getElementById(history.state))
// console.log(history.state);
</script>
</body>
</html>
hash和history的区别仅仅是#吗？
目前单页应用（SPA）越来越成为前端主流，单页应用一大特点就是使用前端路由，由前端来直接控制路由跳转逻辑，而不再由后端人员控制，这给了前端更多的自由。目前前端路由主要有两种实现方式：hash模式和history模式，下... 查看详情
前端路由实现（history）
HTML5history新增了两个API：history.pushState和history.replaceState两个API都接收三个参数：1.状态对象（stateobject）：一个javascript对象，与用pushstate()方法创建的新历史记录条目关联。无论何时用户导航到新创建的状态，popstate事件都会被... 查看详情
hash和history的原理和区别
原理区别hash原理：hash通过监听浏览器的onhashchange()事件变化，查找对应的路由规则history原理：利用H5的history中新增的两个APIpushState()和replaceState()和一个事件onpopstate监听URL变化history模式利用了HTML5HistoryInterface中新增的pushState()... 查看详情
react学习之路由hashrouter和browserrouter(代码片段)
React路由有两种实现方式：HashRouter:利用hash实现路由切换BrowserRouter：利用h5Api实现路由切换1.1HashRouter利用hash实现路由切换<body><divid="root"></div><ahref="#/a">去/a</a><ahref="#/b">去/b</a></body><script>l... 查看详情
前端路由的实现——history的pushstate和replacestate用法(代码片段)
HTML5中history提供的pushState, replaceState这两个API。它们提供了操作浏览器历史栈的方法。pushState能够在不加载页面的情况下改变浏览器的URL。这个方法接受三个参数：状态对象，新状态的标题和可选的相对URL。history.pushState(data,... 查看详情
浅谈前端路由原理hash和history(代码片段)
浅谈前端路由原理hash和history🎹序言🎸一、前端路由原理1、SPA2、什么时候需要路由🎷二、Hash模式1、定义2、网页url组成部分（1）了解几个url的属性（2）演示3、hash的特点🎺三、History模式1、定义... 查看详情
vue-router中hash模式和history模式的关系
Vue-router中hash模式和history模式的关系在vue的路由配置中有mode选项最直观的区别就是在url中hash带了一个很丑的#而history是没有#的mode:"hash";mode:"history";hash模式和history模式的不同对于vue这类渐进式前端开发框架，为了... 查看详情
vue-两种路由模式hash和history
Vue为了构建 SPA（单页面应用），需要引入前端路由系统，这也就是Vue-Router存在的意义。前端路由的核心，就在于—— 改变视图的同时不会向后端发出请求。hash模式和history模式都属于浏览器自身的特性，Vue-Router只... 查看详情
浅谈前端路由原理hash和history(代码片段)
浅谈前端路由原理hash和history🎹序言🎸一、前端路由原理1、SPA2、什么时候需要路由🎷二、Hash模式1、定义2、网页url组成部分（1）了解几个url的属性（2）演示3、hash的特点🎺三、History模式1、定义... 查看详情
前端路由模式hash和history(代码片段)
hash模式hash模式的原理是依据window对象的onhashchange事件进行监听，它的特点是：虽然hash路径出现在URL中，但是不会出现在HTTP请求中，对后端完全没有影响，因此改变hash值不会重新加载页面。window.onhashchange=function(e)console.log(e);打... 查看详情
hash与history的区别
参考技术Ahash模式和history模式都属于浏览器自身的特性，Vue-Router只是利用了这两个特性（通过调用浏览器提供的接口）来实现前端路由。一般场景下，hash和history都可以，除非你更在意颜值，#符号夹杂在URL里看起来确实有些不... 查看详情
vue2.0路由进阶
一、路由的模式 第一种用history方式实现，HTML5使用window.history.pushState()实现路由的切换而不刷新页面。 第二种使用hash值的方式来实现。 vue2.0两种都可以使用只需要在配置路由时加上 mode:‘history/mode‘ vue2... 查看详情
vue-router是什么(代码片段)
路由就是用来跟后端服务器进行交互的一种方式，通过不同的路径，来请求不同的资源，请求不同的页面是路由的其中一种功能。vue-router是vue.js官方路由管理器。vue的单页应用是基于路由和组件的，路由用于设定访问路径，并... 查看详情
了解啥是hash路由和history路由
参考技术Ahash路由：监听url中hash的变化，然后渲染不同的内容，这种路由不向服务器发送请求，不需要服务端的支持；history路由：监听url中的路径变化，需要客户端和服务端共同的支持；我们一步步实现这两种路由，来深入理... 查看详情
vue路由的两种模式，hash与history
参考技术Avue路由的两种模式，hash与history 对于Vue这类渐进式前端开发框架，为了构建SPA（单页面应用），需要引入前端路由系统，这也就是Vue-router存在的意义。前端路由的核心，就在于———改变视图的同时不会... 查看详情
html5入门教程（八）history详解
参考技术AHTML5新添加了对历史的管理，用户可以通过”前进”和”后退”按钮进行历史页面的切换。这让一些不在新页面中打开的新页面前进后退自如，提高了用户体验。通过haschange事件，可以知道URL的参数什么时候发生了变化... 查看详情
vue-router中hash模式和history模式的区别
参考技术A小白回答：hash模式url带#号，history模式不带#号。大牛解答：形式上：hash模式url里面永远带着#号，开发当中默认使用这个模式。如果用户考虑url的规范那么就需要使用history模式，因为history模式没有#号，是个正常的url... 查看详情
vue-learning：37-router-目录(代码片段)
vue路由vue-router目录前端路由历史服务端渲染(SSR:serversiderender)客户端路由(clientsiderouting)前端路由实现原理hash模式:location.hash和hashChange事件history模式：history和popstate事件vue-routerconstrouter=newVueRouter(option)中的选项对象option路由器 查看详情