什么是vue-router?
前端路由有哪些?
SPA单页面应用:
实现SPA(single page application)单页面应用:一个项目只有一个页面,我们基于路由,控制页面显示不用的代码片段(或组件),当展示的内容改变的时候,页面并不会刷新! !
- 移动端大部分都是(追求原生app的操作体验)
- pc端的管理系统
MPA多页面应用:
MPA(multi page application)多页面应用:一个项目有很多页面,我们做的是页面之间的跳转,每一次跳转都是打开一个新的页面(相当于)页面刷新了)! !
- pc端的非管理系统的产品
- 搜索引擎优化:基于JS动态绑定的内容(Vue框架),在页面源代码中是看不到内容的,不利于SEO搜索引擎优化,想做SEO,需要服务器渲染(前后端不分离,现在主流的服务器渲染SSR：node + vue(nuxt.js) + react(next.js))
????????1.?首屏服务器渲染 「骨架屏」
????????2.?其余屏幕还是交给客户端渲染
单页面&&多页面对比图
前端?路由的两大模式
哈希路由（hash router）:监听URL地址后面的HASH值
- 样式：
http://www.xxx/com/index.html#home - 原理：改变url的哈希值不会刷新页面，通过指定的哈希值使用
window.onhashchange事件来控制更改页面渲染的内容
浏览器路由（browser/history router）:基于h5中的history api实现的
- 样式：http://www.xxx.com/home
- 缺点：需要服务器的支持:(当手动刷新的时候，这个页面不存在，不要返回404，依然返回主页面内容)
- 原理：通过history.pushState()方法改变网址，页面不会刷新，再通过window.onpopstate事件监听网址的改变
?
区别
1 hash路由地址不好看，browser路由好看一点
2. 实现机制不同
- HASH路由每次跳转,修改的是URL的hash值(页面不刷新),基于监听onhashchange事件,获取最新的hash值,去路由规则表中,找到相对应的组件拿过来渲染,
- browser路由每次跳转修改的是url地址(页面不刷新history.pushState)；监听popstate事件根据最新的地址找到相对应的组件渲染
- browser路由跳转的地址并不真实存在，所以页面手动刷新，会出现404，此时需要服务器的配合「后台：如果访问的地址不存在，返回主页内容」
vue-router使用
第一步:?$ npm i vue-router