Html5 未掌握的知识笔记（随工作情况更新）

一直疏于对html 5 原生方法的学习和运用，以至于许多简单问题复杂化，所以接下来我将记录一些，我日常工作中对于H5的不了解的记载。

1. inert属性

inert是 HTMLElement 的一个布尔属性，意为"惰性"，简单来说，可以禁用一切交互，包括鼠标点击、选中、拖拽、键盘操作等等，与disabled不同的是他不会出现禁止的符号表现，对于表单展示更加友好。

<div>
  <button disabled onclick="clickMe('disable')">disabled</button>
  <button inert onclick="clickMe('inter')">inter</button>
</div>
<script>
    function clickMe(str){
        window.alert(str);
    }
</script>

2.history

我日常使用的框架是vue，但是最近vue3 的vue router 4.15版之后，使用params传参突然被警告报错，并且无法传参，提醒如下

[Vue Router warn]: Discarded inalid param(s) "XXX" when navigating

于是我查看了他的更新日志。

提示可以使用history来储存参数，于是了解了一下其用法，众所周知，vue router之所以能支持非hash的历史路径，其实就是H5出现了history api，而且会有刷新报错的事故，这个不在本笔记之中说，只说history缓存数据在vue router中代替params 传参的使用。
详细history api文档： https://developer.mozilla.org/zh-CN/docs/Web/API/History_API

let stateObj = {
    foo: "bar",
};
 // 第一个参数是要存的数据，为object；
 // 第二个参数未使用到但属于必填
 // 第三个为浏览器地址栏要展示的url，不改就不加，只是简单替换，不会触发地址跳跃，所以按照当前地址刷新，就会出现404
 // window可带可不带
history.pushState(stateObj, "page 2", "bar.html");
console.log(window.history.state.foo); // bar
// 然后在最新的vue-router 4.15之后，可以直接
useRouter().push("/index", state: {foo: "bar"});
// 在跳转后的的页面取用为
console.log(window.history.state.foo);