Vue -- vue-router(路由)基本配置

---

一、路由的概述

1.1 路由是什么？

路由是一个网路工程术语;路由（routing）是指分组从源到目的地时，决定端到端路径的网络范围的进程 [1] 。路由工作在OSI参考模型第三层——网络层的数据包转发设备。 — 百度百科
路由就是通过互联网的网络把信息从原地址传输到目的地的活动. — 维基百科

1.2 生活中的路由器

路由器通过转发数据包来实现网络互连。路由器通常连接两个或多个由IP子网或点到点协议标识的逻辑端口，至少拥有1个物理端口。路由器根据收到数据包中的网络层地址以及路由器内部维护的路由表决定输出端口以及下一跳地址，并且重写链路层数据包头实现转发数据包。— 百度百科
路由中有一个很重要的概念叫路由表; 路由表本质上就是一个映射表,决定了数据包的指向.它是由内网ip和电脑标识的映射关系.
路由器提供了两种机制: 路由和转送

• 路由是决定数据包从来源到目的地的路径
• 转送将输入端的数据转移到合适的输出端

二、路由的阶段

2.1 后端路由阶段

2.1.1 什么是后端渲染?

访问网页时，后端将 html 内容与 json 数据拼接好之后再返回到客户端来渲染。最常使用的是jsp开发,服务器直接生产渲染好对应的HTML页面,返回给客户端进行展示。

一个网站,这么多页面服务器如何处理呢?

• 一个页面有自己对应的网址,也就是URL
• URL会发送到服务器,服务器会通过正则对该URL进行匹配,并且最后交给一个Controller 进行处理
• Controller进行各种处理,最终生成HTML或者数据,返回给前端
• 这就完成了一个IO操作.

后端渲染的优势

• 服务端渲染不需要先下载一堆 js 和 css 后才能看到页面（首屏性能）
• 服务端渲染不用关心浏览器兼容性问题（随着浏览器发展，这个优点逐渐消失）
• 对于电量不给力的手机或平板，减少在客户端的电量消耗很重要

2.1.2 什么是后端路由?

后端路由，其实就是一个web服务器。通过用户请求的url导航到具体的html页面；每跳转到不同的URL，都是重新访问服务端，然后服务端返回页面，页面也可以是服务端获取数据，然后和模板组合，返回HTML，也可以是直接返回模板HTML，然后由前端js再去请求数据，使用前端模板和数据进行组合，生成想要的HTML。
简单的说就是: 后端 处理URL 和 页面之间的映射关系 .

后端路由的缺点

• 一种情况是整个页面的模块由后端人员编写和维护的.
• 另一种情况是前端开发人员如果要开发页面,需要通过Java等语言来编写页面代码
• 通常情况下HTML代码和数据以及对应的逻辑会混在一起,编写和维护都是非常槽糕的事情

2.2 前后端分离阶段

后端只负责提供数据,不负责任何阶段的内容.

• 随着Ajax的出现,有了前后端分离的开发模式.
• 后端只提供API来返回数据,前端通过Ajax获取数据,并且可以通过JavaScript 将数据渲染到页面中.
• 这样做最大的优点就是前后端责任的清晰,后端专注于数据上,前端专注于交互和可视化上.
• 并且当移动端(IOS/Android) 出现后,后端不需要进行任何处理,依然使用之前的一套API 即可.

前端渲染
浏览器中显示的网页中的大部分内容,都是由前端写的js代码在浏览器中执行,最终渲染出来的网页.

2.3 单页面富应用阶段

SPA(Simple Pageweb Application 单页面富应用)最主要的特点就是在前