2.15Vue全家桶-VueRouter
Vue全家桶：Vue Core Vue的核心语法
VueRouther
Vuex/pinia
1.前端路由的发展历程
1.1前端路由
路由其实是网络工程中的一个术语:
- 在架构一个网络时，非常重要的两个设备就是路由器和交换机。
- 当然，目前在我们生活中路由器也是越来越被大家所熟知，因为我们生活中都会用到路由器:
- 事实上，路由器主要维护的是一个映射表；
- 映射表会决定数据的流向；
其实前端路由就是，在前端维护一个前端路由，根据不用的url切换到不同的组件
1.2后端路由
1.3前后端分离阶段路由
请求后端服务器返回一部分的基本页面，其他比如列表，发送ajax请求后端的数据
前端渲染的理解：
- 每次请求涉及到的静态资源都会从静态资源服务器获取，这些资源包括 HTML+CSS+JS，然后在前端对这些请求回来的资源进行渲染；
- 需要注意的是，客户端的每一次请求，都会从静态资源服务器请求文件；
- 同时可以看到，和之前的后端路由不同，这时后端只是负责提供 API；
前后端分离阶段：
- 随着 Ajax 的出现，有了前后端分离的开发模式；
- 后端只提供 API 来返回数据，前端通过 Ajax 获取数据，并且可以通过 JavaScript 将数据渲染到页面中；
- 这样做最大的优点就是前后端责任的清晰，后端专注于数据上，前端专注于交互和可视化上；
- 并且当移动端 (iOS/Android) 出现后，后端不需要进行任何处理，依然使用之前的一套 API 即可；
- 目前比较少的网站采用这种模式开发；
单页面富应用阶段：
- 其实 SPA 最主要的特点就是在前后端分离的基础上加了一层前端路由.
- 也就是前端来维护一套路由规则。
2.Vue-Router基本使用
2.1认识vue-router
目前前端流行的三大框架，都有自己的路由实现：
- Angular 的 ngRouter
- React 的 ReactRouter
- Vue 的 vue-router
Vue Router 是 Vue.js 的官方路由：
- 它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用（SPA）变得非常容易；
- 目前 Vue 路由最新的版本是 4.x 版本，我们上课会基于最新的版本讲解；
vue-router 是基于路由和组件的
- 路由用于设定访问路径，将路径和组件映射起来；
- 在 vue-router 的单页面应用中，页面的路径的改变就是组件的切换；
2.2vue-router的使用/安装
2.3Vue使用过程的演练
- 创建路由对象
- routes: 映射关系
- history: 修改 url 的模式 (hash/history)