今天给大伙儿聊聊 SPA 的路由。很多人可能对这个概念有点懵，其实说白了就是通过改变 URL 来切换页面显示。React 这边用的是 history 库，Vue 里用的是 vue-router，原理上其实都差不多，我这里就拿 Vue 来给大家说说。 为什么还得自己动手写呢？其实没啥大不了的，主要是想让大家直观地看到 SPA 这东西到底是怎么玩的。你想想，页面就一个 HTML 文件，怎么就能显示出不同的界面呢？关键就在这里。国庆节最后一天终于把那个小例子写完了，虽然很简单，但是很直观。 先从 hash 模式开始说吧。这个模式就是利用 URL 里的那个 #hash 部分来做标识。简单点说，就是当你在地址栏里输入一个带有 # 的路径时，浏览器会触发 window.onhashchange 这个事件。Vue 那边监听了这个事件，根据不同的 hash 值去匹配相应的组件。比如你访问 #about，页面就显示 About 组件，回到 # 就显示 Home。这其实就是 Vue 的 render 函数在起作用，它把匹配到的组件渲染到了 DOM 上。 代码部分其实特别简单。router.js 里只要指定 mode 为 hash 模式就行。main.js 里引入 Vue 和 App.vue，还有刚刚那个 router.js。然后 Vue.use 一下 VueRouter 就行了。最后 new 一个 Vue 实例把这些东西都挂上去就行了。 接下来看看 history 模式。这就更高级一点了，直接用 HTML5 History API 里的 pushState 和 replaceState 方法来实现跳转。这样做的好处是 URL 里没有那个难看的 # 了。虽然只是改了一个单词把 mode 改成 history 就行了，但是还得在服务器那边做个 404 的重定向配置。不然静态资源加载起来会出问题。 最后简单总结一下吧。上面这段代码虽然很简陋，但是足以让你看懂 vue-router 的运作逻辑：匹配路径、映射组件、更新 DOM。如果想深入研究一下底层实现，直接去 GitHub 上下载源码看看就行了。 这次假期终于结束了摸鱼的时间也到了下次再聊！