vue的路由原理

hash模式

【核心api: window.onhashchange事件 】

url的hash变化会产生历史记录而且不会刷新页面，浏览器不会重新请求url

window.onhashchange = event => {
  console.log(event.oldURL) // https://github.com/chaos-zhu/vue-study/issues/21#/home1
  console.log(event.newURL) // https://github.com/chaos-zhu/vue-study/issues/21#/home2
}
// 页面初次加载获取hash
document.addEventListener('DOMContentLoaded', ( ) => {
  console.log(location.hash)
})
// js 修改url
location.hash = '#/home'

history模式

【核心api: history.pushState方法 与 window.onpopstate事件】

history.pushState(创建一条新的历史记录) && history.replaceState(修改当前页历史记录) 【IE10+】

改变当前页面的url，但浏览器不会请求该url；添加一条历史记录

pushState({ test: 123 }, 'title', '?xxx=xxx')

• 参数1为网页url state，调用后可以通过history.state获取；参数2为网页标题(浏览器不认，没啥实质性作用)；参数3为路由目标的path，也可以只是一个query string

replaceState(...)

• 参数与pushState一致

路由变化后监听

window.onpopstate: window上的属性, 监听浏览器后退、前进(包含history.back/forward/go等)

TIP

• 注意： history.pushState() 或者 history.replaceState() 不会触发popstate事件

DANGER

pushState&&replaceState并没有响应的监听事件，所以直接调用history.pushState/replaceState是无法跳转路由的, vue-router中通过响应的push方法跳转

// 后续阅读vue-router源码深入。。。

abstract模式

用于ssr渲染相关，支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式.