【九月打卡】第四天 + Vue面试考点

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

课程章节：Vue3.0

主讲老师：双越老师

课程内容：

今天学习内容包括

1. 如何用JS实现路由

课程收获：

如何用JS实现路由

• vue-router 的路由模式：hash模式，H5 history

网页 url 组成

• http://127.0.0.1:8881/01-hash.html?a=100&b=20#/aaa/bbb

• location.protocol // 'http:' 【协议】

• location.hostname // '127.0.0.1' 【IP地址/域名】

• location.host // '127.0.0.1:8881' 【IP地址带端口】

• location.port // '8881' 【端口】

• location.pathname // '/01-hash.html' 【文件路径名】

• location.search // '?a=100&b=20' 【参数】

• location.hash // '#/aaa/bbb' 【#及后面的部分】

hash 的特点

• hash 变化会触发网页跳转，即浏览器的前进、后退

• hash 变化不会刷新页面，SPA 必需的特点

• hash 永远不会提交到 server 端（前端自生自灭）

hash 变化示例

• onhashchange：用来监听 hash 值的变化

• href 属性是一个可读可写的字符串，可设置或返回当前显示的文档的完整 URL

课程学习截图：