前言
仅仅作为知识理解输出的一个窗口，方便后续回顾。
vue是框架，自然就得先进行对应的环境配置搭建--》利用到vue-cli这个脚手架进行搭建，[可看链接](Vue脚手架（vue-cli）搭建和目录结构详解（一） - 再见小猴子 - 博客园 (cnblogs.com))
[就是创建项目前期的配置选择--有这些脚手架真的方便很多]((64条消息) vue脚手架创建项目_亦是木子也是雨的博客-CSDN博客_vue脚手架创建项目命令) ，有时间深入下。
在这里面有一个本地执行命令：npm run serve---------->这个命令的具体执行是怎么样的？
npm run serve 实际上会执行 vue-cli-service serve（该文件位于 node_modules.bin\vue-cli-service.cmd），然后查看该文件会发现最终执行 node vue-cli-service.js serve（该文件位于 node_modules@vue\cli-service\bin\vue-cli-service.js）。
vue-cli-service.js就是我们的切入口。
vue-router
单页面相关
- 先了解下什么是单页面？
通俗一点说就是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入，单页面的页面跳转，仅刷新局部资源。多应用于pc端。 - 如何实现单页面应用的？
页面的跳转是使用js 实现判断路径的变化，去展示不同的组件内容。 页面自始至终都不会刷新！ - 为什么需要单页面？（优点）
主要优点就是它的本质所决定的；只需要一次加载页面所需要的所有东西---》
- 页面切换快（自然），因为不需要再次发送http请求，必然快喽！
- 减少服务器端压力；因为只进行一次加载
- 前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理；
单页面的缺点？
- 由于第一次加载页面，所有组件js也会被加载--》存在首屏加载慢问题（通过动态引入，路由懒加载解决）
- SEO效果差---》很多HTML中的内容需要靠JS渲染，搜索引擎不识别（这个还是蛮有意思的，的确如此）
多页面相关
- 先了解下什么是多页面？
通俗来讲，每次页面跳转，服务器端都会返回一个新的HTML文档。
就是指一个应用中有多个页面，页面跳转时是整页刷新。 - 如何实现多页面应用的？
每一次url变化，都会向服务器发送请求，获得数据，再渲染。（一开始就是这种） - 为什么需要多页面？（优点）
主要优点就是它的本质所决定的；每次请求只返回一个HTML页面---》
- 首屏加载快
- SEO效果好
多页面的缺点？
- 首屏切换慢
单页面多页面区别？
从页面构成、页面跳转方式、是否需要重加载、首屏加载与页面切换等进行比较。
- 多页面应用是由多个不同的页面构成，单页面应用是一个外壳页面和多个页面片段构成。
- 多页面应用的页面跳转是从一个页面跳转到另一个页面，而单页面则是把一个页面片段删除或隐藏，加载另一个页面片段。
- 跳转后多页面应用是需要进行重新加载的，但是单页面不需要重新加载。
- 多页面应用首屏加载快但是且缓慢，单页面应用首屏加载慢但是切换快。
- 多页面应用依靠URL、Cookie、LocalStorage来传递数据，单页面应用则是靠组件进行通信，相对更加简单。
前端路由原理
hash
url发生变化《---》通过监听hashChange事件来监听URL中hash值的变化，触发相关函数，改变相关组件。
history
利用了HTML5中history的API,history.pushState和history.replaceState这两个方法可以在不刷新页面的情况下，操作浏览器的历史记录，这样也就满足了第一个条件，然后通过监听popState事件来剪影URL的变化，从而触发相关函数，改变相关组件。引用了该作者，链接：(单页面应用的前端路由原理是什么？ - 掘金 (juejin.cn))
注意点: 虽然History模式可以丢掉不美观的#,也可以正常的前进后退,但是刷新f5后,此时浏览器就会访问服务器,在没有后台支持的情况下,此时就会得到一个404!官方文档给出的描述是:"不过这种模式要玩好,还需要后台配置支持.因为我们的应用是单个客户端应用,如果后台没有正确的配置,当用户直接访问时,就会返回404.所以呢,你要在服务端增加一个覆盖所有情况的的候选资源;如果url匹配不到任何静态资源,则应该返回同一个index.html页面."
总而言之:History模式就是通过pushState()方法来对浏览器的浏览记录进行修改,来达到不用请求后端来渲染的效果.不过建议,实际项目还是使用history模式.
[](可能比文档还详细--VueRouter完全指北 - 掘金 (juejin.cn))
[](带你全面分析vue-router源码（万字长文） - 掘金 (juejin.cn))
[](「源码解析 」这一次彻底弄懂react-router路由原理 - 掘金 (juejin.cn))
后续有时间再继续深究
