[vue-router] hash、history模式底层实现思想
//history.pushState附加哈希值并不会触发onhashchange var newHash = 'test'; history.replaceState(null, null, window.location.pathname + '#' + newHash);
Hash模式底层思想
window.onhashchange() 就会监听到哈希值改变
History模式底层思想
可以使用浏览器前进后退功能，使用onpopstate监听浏览器前进后退
window.onpopstate = funcRef;
history.pushState({page: 1}, "title 1", "?page=1");
history.pushState({page: 2}, "title 2", "?page=2");
history.replaceState({page: 3}, "title 3", "?page=3");
history.back(); // 弹出 "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // 弹出 "location: http://example.com/example.html, state: null
history.go(2); // 弹出 "location: http://example.com/example.html?page=3, state: {"page":3}
实现代码
<body>
<button onclick="_click1()">hash模式</button>
</body>
<script>
function _click1(){
location.hash='test'
}
addEventListener('hashchange',function(){
console.log('触发了hashchange');
})
</script>
vue-router配置
//mode值 可以使history 可以是hash，默认是hash
const router = new VueRouter({ mode: 'history', routes: [...] })
