您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例
mixin插件、history-history
发布时间：2020-05-22 18:22:04编辑：雪饮阅读（）
History
所谓的history是route模式的一种，route默认是hash模式，就是地址栏通过#锚链接实现路由的。
而history模式则不需要地址栏传递#锚链接。
配置起来非常容易，以上次的02_plugin_mixin_config项目为例
只需要在src/router/index.js中增加如
const router = new VueRouter({
mode:'history',
routes
})
当然为了保证用户直接进入某个url而不是通过页面上点击进入某个url，则需要在服务器端也设置下。（这个问题为什么hash模式下不会存在？因为hash模式下#是必带在地址栏的，所以就算是用户直接进入某url也不会有所影响）
我这里的环境：
phpstudy8.1+localhost+laravel5+windows10+nginx
history模式项目部署在laravel的public中，则配置如：try_files $uri $uri/ /index.html;
querySelectorAll选择器
querySelectorAll() 方法返回文档中匹配指定 CSS 选择器的所有元素，返回 NodeList 对象。
如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a>测试1</a><a>测试2</a><p>测试3</p>
<script>
let a_s=document.querySelectorAll('a');
console.log(a_s);
</script>
</body>
</html>
history.pushState
HTML5新接口，可以改变网址而不刷新页面，这个强大的特性后来用到了单页面
示例如
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
history.pushState({},'','/dmj220807')
</script>
</body>
</html>
然后你就可以看到地址栏形如：http://localhost:63342/dmj220807
模拟浏览器请求中的效果(卡顿)
如果访问一个网页，毕竟是网站类如果一直没有处理完成，我们一般会认为是网速慢，或者认识深刻的认为是服务端处理慢。
那么看如下程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var current=Date.now();
while (Date.now()-current<5000){}
</script>
</body>
</html>
该程序执行的效果
纯粹的前端，没有涉及到服务端交互，这里你的值写成多少毫秒，则浏览器的那个刷新按钮才会什么时候才加载完毕，这样会给人一种错误的认知以为服务端慢或者网速慢，所以说客户端脚本执行慢也会让人觉得慢。
原生js模拟history模式
基于以上的所有内容，我们知道，只要我们页面上所请求的路径服务端永远只返回本页面(防止用户不不经过该页面点击到该页面中的某个组件而直接访问该组件)并结合history.pushState就可以做到vue不刷新页面也能看似是多个页面组成的项目一样的效果。
则我们可以用原生js模拟该history模式如
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a class="router-link" href="/" >Home</a>
<a class="router-link" href="/about" >About</a>
<div id="router-view"></div>
<script type="text/javascript">
var a_s = document.querySelectorAll('a');
var routerView = document.getElementById('router-view');
//由于无论地址怎么变服务器端一直只返回index这个页面，所以我们就可以在该页面通过地址栏改变进而改变该页面某个id(组件)的内容s
function changeContent (href) {
switch (href) {
case '/' :
routerView.innerHTML = `<div>首页</div>`;
break;
case '/about' :
routerView.innerHTML = `<div>关于我们</div>`;
break;
}
}
// 初始行为
// 获取url路径
changeContent(location.pathname);
for (var i = a_s.length - 1; i >= 0; i--) {
a_s[i].addEventListener('click',function(e){
e.preventDefault();
var href = e.target.getAttribute('href');
// 变更地址栏
history.pushState({},'',href);
// 匹配 模拟一堆routes
changeContent(href);
});
}
</script>
</body>
</html>
关键字词：vue,router,mode,history,hash