【学习打卡】第2天 Vue-router 原理(1)

课程名称：前端框架及项目面试 聚焦Vue3/React/Webpack

课程章节：第4章 Vue 原理

主讲老师：双越

课程内容：

今天学习的内容包括：

4-21 如何用JS实现hash路由 （hash 模式主要是 window.onhashchange 方式来监听）

4-22 如何用JS实现H5 history路由 （history 模式 主要是 history.pushState 和 window.onpopstate）

课程收获：

大概复述一下：

• hash 模式

hash 变化触发浏览器前进后退，但不会刷新页面，不会提交到 server 端。

hash 变化方式：

js 修改 url，手动修改 url 的 hash， 浏览器前进后退

window.onhashchange = (event) => {
  console.log(`old url：${event.oldURL}`)
  console.log(`new url：${event.newURL}`)
  console.log(`hash：${location.hash}`)
}

to B 系统推荐用 hash

• history 模式

跳转不刷新页面，与 hash 区分修改了 url 网页会重新加载。

history.pushState(state, '', 'page1');

// 监听路由前进后退 
window.onpopstate = (event) => {
  console.log("ps", event.state, location.pathname);
}

history 模式服务端需要处理，无论访问那个页面，服务端都返回 index.html

to C 系统考虑选择 history 模式

看了一下，无论哪种模式这块主要是要监听路由变化。

大概耗时半个小时，说实话感觉讲的没有想象中的那么深入。希望明天能够继续。