Vue Router 简介

何为路由

• 一组路由即一组映射关系（key-value）
• key 为路径，value 可能是 function 或 component

路由分类

后端路由

理解：value 是 function，用于处理客户端提交的请求，

对应关系：指请求方式、请求地址与 function 处理函数之间的对应关系

工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据

前端路由

理解：value 是 component，用于展示页面内容。

对应关系：地址和组件之间的对应关系

工作过程：当浏览器的路径改变时，对应的组件就会显示

前端路由简易工作方式：

1. 用户点击了页面上的路由链接
2. URL 地址的 Hash 值发生变化
3. 前端路由监听到 Hash 值的变化
4. 前端路由渲染 Hash 地址对应的组件

单页面应用程序 SPA

理解

单页面应用程序（single page web application，SPA）将所有的功能局限于一个 web 页面中，仅在该 web 页面初始化时加载相应的资源（ HTML、JavaScript 和 CSS）。 一旦页面加载完成了，SPA 不会因为用户的操作而进行页面的重新加载或跳转。而是利用 JavaScript 动态地变换 HTML 的内容，从而实现页面与用户的交互。

1. 整个应用只有一个完整的页面
2. 点击页面中的导航链接不会刷新页面，只会做页面的局部更新
3. 数据需要通过ajax请求获取

优缺点

SPA 的优点：

• 良好的交互体验
  • 内容的改变不需要重新加载整个页面
  • 数据通过 Ajax 异步获取
  • 没有页面跳转，不会出现白屏现象
• 良好的前后盾工作分离模式
  • 后端专注于提供 API 接口，更易实现接口复用
  • 前端专注页面渲染，更利于前端工程化发展
• 减轻服务器压力
  • 服务器只提供数据，不负责页面的合成与逻辑处理，吞吐能力会提高

SPA 的缺点：

• 首屏加载慢：可使用路由懒加载、代码压缩、CDN 加速、网络传输压缩
• 不利于 SEO ：SSR 服务器端渲染