Vue面试题42：router-link和router-view的工作原理（总结自B站up主‘前端杨村长’视频，仅供自用学习）

• 分析
  • vue-router中两个重要组件router-link和router-view，是实现SPA的关键；
• 思路
  • 1.总述两者作用；
  • 2.阐述整体流程；
  • 3.分析两个组件实现方式；
• 回答范例
  • vue-router中有两个重要组件router-link和router-view，分别起到路由导航和组件内容渲染的作用；
  • 整体流程：vue-router会监听popstate事件，点击router-link之后页面不会刷新，而是拿出当前path去和routes中path匹配，获得匹配组件之后，由于router-view会对其产生依赖，最终会得到匹配的组件并将其渲染出来；
  • 具体的：router-link实现时默认会生成a标签，点击后会取消默认跳转行为；转而执行一个navigate方法，在方法内部修改一下正在访问的地址，进而重新匹配出一个路由及injectedRoute，与此同时会pushstate以激活事件处理程序，在处理程序内部重新赋值injectedRoute；又因为router-view的渲染函数依赖这个路由，它会根据该路由获取要渲染的组件并最终重新渲染它；