vue-router使用与源码浅析

本文主要讨论最新版的vue-router（支持Vue3），主要从其出现原因、使用方式、自己实现一个玩具vue-router以及vue-router源码分析这几个角度去讨论，希望你喜欢。

前端路由演变

在JQuery时代，多数Web项目的路由都是由后端实现的，用户访问网页时的常见流程为：

• 1.用户访问路由

• 2.后端获得路由并匹配相应的模板

• 3.后端动态渲染模板并返回

• 4.浏览器加载返回模板中的JS、CSS

前端人员的开发多数都受限于后端框架提供的模板语言，用户每次页面跳转，都由后端动态渲染出相应的模板并返回。

这种项目开发方式有很多缺点：

• 前后端无法分离

• 页面调整需要刷新整个页面

• 等待时间较长、交互体验下降

当Ajax出来后，前后端可以分离了，前端工程师尝试利用JS来构建路由系统，用户访问某路由时，利用Ajax去动态获取数据，再利用JS去动态生产换网页页面，这样页面不需要全局刷新，用户浏览网页的体验也更好了一些。

这种，通过JS去控制路由，让用户一直停留在index.html上，通过JS动态根据不同路由加载不同页面元素的应用便是单页应用程序（SPA，single page application）的早期形态。

vue-router的核心原理也类似，通过JS去匹配URL，然后加载不同的页面内容。

一般，前端JS匹配路由URL有两种方式：

• hash模式，通过在URL中加入#来做内容区分

• history模式，这种方式的URL看起与正常的一样

在2014年之前，大家主要通过hash模式来匹配URL，其URL形式为：

http://xxx.com/#/home

当页面跳转时，URL中#后的内容变化会触发hashchange事件（这种模式称为hash模式的原因），通过对hashchange事件的监听，便可以实现对网页内容的动态渲染：

window.addEventListener('hashchange', fn)

通过window.addEventListener方法，我们实现了，当hashchange事件改变时，对fn方法的调用，在fn方法中，可以对URL中不同的hash值进行不同的逻辑操作，比如加载不同页面内容。

在2014后，HTML5标准发布，浏览器多了pushState与replaceState这两个API，通过这两个API，我们可以改变URL且浏览器不会向后端服务发起请求，同时还触发popstate事件，利用这两个新增的API和popstate事件，便可以设计出history模式。

已经通过window.addEventListener方法监听popstate事件，然后调用相应的方法则可。

简单使用vue-router

构建一个vue3项目，然后安装vue-router@next。

yarn create vite DashboardFrameWork --template vue
yarn add vue-router@next

在src/components中创建Home.vue和About.vue这两个文件：

<!-- Home.vue -->
<template>
  <div>
    主页
  </div>
</template>


<!-- About.vue -->
<template>
  <div>
    关于页
  </div>
</template>

创建src/router目录，用于存放路由相关的逻辑，在src/router目录下，创建index.js，代码如下：

// src/router/index.js

import { createR