从Vue Router来看客户端与服务端路由

前言

当我们创建一个Vue项目的时候，如果我们选上了Router选项，则会在项目那里生成一个router文件夹，并在该文件夹里有着index.js代码，这时候我们可以看看这个代码并且查看它的用途：

接下来，我们就来分析一下这个我们开发Vue项目几乎必备的库的原理吧

客户端路由与服务端路由

Vue Router是一种客户端路由实现，这里我们要先理解什么是客户端路由

客户端路由

客户端路由有着以下特点：

• 数据和页面的加载均在浏览器中进行
• 用户在点击浏览器进行页面切换的时候，不需要向服务器发送请求，仅仅需要改变浏览器的URL，客户端再根据URL加载相对应的组件与数据，这一点也是客户端路由与客户端路由的核心区别，当我们第一次输入URL请求的时候，页面不仅仅会返回所请求的页面，还会返回其余剩下的部分，这时候的浏览器就已经有了之后URL发生变更时需要请求的所有代码，当这时我们再一次发送请求的时候，无需重新加载页面，这便是单页面应用，因为返回的其实只是一个index.html
• 由于为单页面应用，也就让客户端路由有着相较服务端路由更强的性能体验————SPA页面渲染和数据加载均在客户端进行，这大大降低了服务器的压力，也就能够更好的提供网站的性能与响应能力

服务端路由

在上面我反复的将客户端路由与服务端路由进行对比，接下来就让我们看看服务端路由的特点吧：

这么一看下来，也就可以让我们去分析它们的缺点了：

服务端端路由和服务端渲染？

这里多提一嘴，千万不要将客户端路由、服务端路由与客户端渲染(CSR)和服务端渲染(SSR)搞混了！

服务端路由是指在服务器端根据请求的 URL 地址匹配相应的处理函数来处理请求，这种方式会在服务器端渲染HTML页面，但是生成的页面仍然需要通过浏览器的JavaScript解析器来执行一些前端的逻辑，所以它(服务端路由)仍然是一种客户端渲染方式。而SSR则是在服务端完成了HTML页面的渲染，可以避免客户端执行大量的JavaScript代码，从而提高页面的加载速度和用户体验，这也是SSR能够提高首屏渲染的原因

总结

总体来说，客户端路由和服务端路由各有优缺点。客户端路由适用于需要提供优秀交互体验，但首屏渲染较慢、不利于SEO优化，需要在浏览器中进行数据请求，对服务器的性能要求相对较低。而服务端路由适用于需要提供更好的SEO优化、快速首屏渲染的网站，但需要向服务器发送新的请求，对服务器的性能要求较高。因此，在实际应用中，我们应该根据具体需求来选择使用哪种路由方案。

无论是客户端路由还是服务端路由，都有一定的应用场景和适用范围。对于需要提供优秀用户体验和动态交互的 Web 应用，客户端路由更为适用；而对于需要提供更好的SEO优化和网站性能的网站，服务端路由更为适用。但之后的出现了nuxt.js和next.js，很大程度上弥补了传统的客户端路由不利于SEO优化的问题，这或许也是尤大在很多的演讲中都会提到Vue3对SSR(服务端渲染)的优化的原因之一

最终选择哪种路由方案，还要需要结合具体的项目来分析。