11 | 路由：新一代vue-router带来什么变化

本节又是收获满满，巩固加回顾了关于前端路由的整体知识结构，有一下几点： 1. 什么是路由 所谓 router 是干什么的？是指 route 的，这里中文翻译的是 “路”。何为“路由”，可能是“路由哪里 来"；这里的“路”，广义上来说是“资源”，可以是“页面”，也可以是 json 音视频等等。 如果把路由具象化，它是这么个东西；你告诉它一串神秘的代码（地址，url等），它给你“宝贵的资 源”，它就是个“指路的”。 路由是“天然”存在的，因为我们所有在网上的行为本质都是向“某个地方”要“某些资源” 2. 前后端路由的区别的补充 传统方式与SPA“页面跳转”的问题涉及一个核心的问题，是“导航流程”，具体可以参考，李兵老师 《浏览器工作原理与实践》中导航流程一节。 导航流程简单说，就是浏览器地址栏输入地址后，到浏览器准备渲染页面前这个阶段。开始流程的 一个标志，就是浏览器标签页标题左边开始转圈圈。 传统的开发模式写出的页面，在每一次请求网络资源的过程，理论上都有这个流程。这可能就是两者 之间性能差异所在 而 SPA 开发模式，网络资源用 XMLHttpRequest 调用，页面部分用JS“模拟”页面刷新。这里JS模拟部 分就是现在所学 vue-router 的工作。 3. 关于路由实现 总结下，时间以2014年，HTML5标准作为分野，分两个部分 – API：location.hash；Event：hashchange – API：history.pushState，history.replaceState；Event：popstate 这个就是前端路由的实现核心，如果对具体API感兴趣，可以参考《Javascript 高级程序设计》第4 版，12章，关于 BOM 的描述。 大致意思是 hash 的改变不触发页面 reloads；pushState，replaceState 改变 history 也不触发 reloads。浏览器的这种行为，是根据 HTML5 这个标准实现的 然后，第一个API支持了路由的 hash 模式，在这之前 hash 的应用 <a id="xxx"> 在页面中的定位， 第二个API支持了路由的 history 模式，但这个需要后端配合调整下后端路由；为什么，试着将要跳 转的地址复制到浏览器地址栏，然后按回车，分析下页面渲染的过程，大概就清楚了。

关于webHashHistory,和webHistory 我这里有一个实践要注意的点，不知是否正确。 就是是否需要服务器这个角色参与。 whh，完全是在浏览器中完成的路由行为。 wh 可能是要有服务器参与的 这一点，在最近的项目中，将vue项目打包直接放到Android assert目录下时，使用两种路由一个404, 一个正常，后续改成了whh了 请大佬，解惑。

大圣 实战代码仓库地址 能发一下吗

大圣老师，看完之后，仍有几个问题，求翻牌+1 1.能说下vue-router3.x到vue-router4.x有什么需要重点关注的地方嘛 2.vue-router3.x和vue-router4.x 从底层实现原理上，是否有变化 3.代码里current 的响应式用的 ref 和用vue.util.definereactive 效果一样嘛

大圣老师，我跟你一样的代码，为什么在命令行提示：[@vue/compiler-sfc] `defineProps` is a compiler macro and no longer needs to be imported.然后在浏览器控制台又提示：Uncaught SyntaxError: The requested module '/src/router/grouter/index.js' does not provide an export named 'default'。

老师好，调用 pushState replaceState 并不会触发 popstate 事件，监听通常需要 hack 这两个 api。 https://developer.mozilla.org/en-US/docs/Web/API/PopStateEvent#:~:text=Note%3A%20Just%20calling%20history.pushState()%20or%20history.replaceState()%20won%27t%20trigger%20a%20popstate%20event.

老师请问Router对象的install，是在哪里用呢？在源码中没有看到，还有install函数的参数，是什么对象呢？

有了 RouterView 组件后，我们再来实现 router-link 组件。我们在 grouter 下面新建文件 RouterILnk.vue，并写入下面的代码。代码中的 template 依然是渲染一个 a 标签，只是把 a 标签的 href 属性前面加了个一个 #， 就实现了 hash 的修改。 老师，这一段中的 “新建文件RouterILnk.vue ” 与下文的注册 “import RouterLink from './RouterLink.vue' ”的文件名字对不上，应该是打错了，会找不到资源

<template> <a :href="'#'+props.to"> <slot /> </a> </template> <script setup> let props = defineProps({ to:{type:String,required:true} }) </script> 这里是否需要引入下defineProps，大段代码部分能否内部写点注释 建议老师跟着文章里的代码打一遍，看看能不能跑通 代码上 有些马虎 是否是从课件里粘出来的时候整漏了

很早啊就知道History这个API了但是没用过也用不上，但今天用History写路由的时候，看了API才发现使用history.pushState()方法的时候不会触发 popstate 这个事件，只有当浏览器操作行为的时候才会触发，就比如back forward。 所以在实现的时候调用完pushState之后我手动修改的current.value 的值才成功了。