从头开始学Vue-Router

前言

Vue-Router提出来是为了解决什么问题，跟之前写a标签或者从新打开一个浏览器窗口有什么不一样，有什么优点，它的实现原理是什么等等带着这些问题咱们来深刻了解一下Vue-Router。

背景

之前咱们打开页面通常都是用a标签或location.herf或window.open等方式，咱们发现有时候每打开一个页面都会有点卡，由于咱们每打开一个浏览器窗口都会从新加载所须要的资源包括公共css、js、图片等等，不少页面都加载的是一样的公共资源，这样子就会形成浏览器性能的大量消耗，而且前端重复的代码很是多，由于代码不能复用，好比头部或者底部不少html文件都要写一份，很不利于维护，特别是遇到复杂项目的时候，工做量成倍增长。为了注重用户体验(下降浏览器性能损耗)、开发大型复杂的项目(组件化，不须要重复写大量的代码)这两个主要难题的时候，单页面应用被提了出来。

单页面应用(SPA)

单页面应用是指只有一个页面的应用，在浏览器中运行期间不会从新加载页面，以后全部的交互操做都在一个页面上完成，这些都是经过vue-router切换不一样的vue组件来显示不一样的组件内容。公共资源(js、css等)仅需加载一次且一次所有加载，因此会有首屏问题，就是第一次打开页面有点慢，多页面应用是按需加载公共资源，因此没有首屏问题。 如图：

从上图咱们能够看到Page-One、Page-Two、Page-Three共用一个Header和Footer。

多页面应用(MPA)

多页面跳转从新加载页面，所需公共资源(js、css等)会从新加载，因此不少页面都会加载相同的公共资源，形成浏览器性能的巨大浪费。 如图：

从上图咱们能够看到Page-One、Page-Two、Page-Three每一个页面都须要分别写一个Header和Footer形成大量代码重复。

具体对比分析：

	单页面应用	多页面应用
组成	一个index.html页面和若干组件组成	多个完整页面构成
资源共用(css、js、img等)	共用，只须要在index.html页面加载	不共用，每一个页面都须要加载
刷新方式	页面局部刷新或更改	整页刷新
url模式	a.com/#/pageone a.com/#/pagetwo	a.com/pageone.html a.com/pagetwo.html
用户体验	页面组件的切换快，用户体验好	页面之间的切换加载缓慢，流畅度不够，用户体验比较差
转场动画	容易实现	没法实现
数据传递	容易	依赖url传参、cookie、localStorage等
搜索引擎优化(SEO)	须要单独方案、实现较为困难、不利于SEO检索，可利用服务器端渲染(SSR)优化	实现方法简易
试用范围	高要求的体验度、追求界面流畅的应用	适用于追求高度支持搜索引擎的应用
开发成本	较高，常需借助专业的框架	较低，但页面重复代码多
维护成本	相对容易	相对复杂

从上图咱们能够看到单页面应用的优点和劣势：

单页面应用的好处

• 用户体验好，快，内容的改变不须要从新加载整个页面，基于这一点SPA对服务器压力较小。从性能和用户体验的层面来比较的话，后端路由每次访问一个新页面的时候都要向服务器发送请求，而后服务器再响应请求，这个过程确定会有延迟。而前端路由在访问一个新页面的时候仅仅是变换了一下路径而已，没有了网络延迟，对于用户体验来讲会有至关大的提高。
• 单页面应用没有页面之间的切换，就不会出现"白屏现象"，也不会出现假死并有"闪烁"现象。
• 良好的先后端分离。后端再也不负责模版渲染、输出页面工做，只须要出数据就能够，后端API通用化，即同一套后端程序代码，不用修改就能够用于web界面、手机、平板等客户端。

单页面应用的缺点

• 首次加载耗时比较多：为实现单页Web应用功能及显示效果，须要在第一次打开页面的时候将全部公共资源JavaScript、CSS、图片等一块儿加载，因此会有首屏问题，就是第一次打开页面有点慢。
• SEO难度较高：搜索引擎爬虫工具只会爬取到后端返回的html内容(不支持ajax数据的爬取也就是不能爬取接口返回的数据)，单页面应用只会在第一次进入页面的时候会向后端请求html文件，这时候会被搜索引擎爬虫工具检索到，可是在切换组件的时候是不须要向后端发送请求html文件的，因此是没法被爬虫工具检索到的，多页面应用每次页面跳转后端服务器都会返回一个新的html文档，会被爬虫工具检索到。 针对以上两个缺点vue又提出了SSR来解决。

Vue-Router原理

这里的路由是SPA的路径管理器。Vue-Router是Vue.js官方的路由插件，它和Vue.js是深度集成的，适合于构建单页面应用。Vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面，是经过超连接来实现页面跳转，在Vue-Router单页面应用中，则是路径之间的切换，也就是组件的切换。Vue路由的本质就是创建起hash路由和组件之间的映射关系。 单页面应用的核心之一是更新视图而不从新请求页面，Vue-Router在实现单页面应用前端路由时，提供了两种方式：Hash模式和History模式，根据mode参数来决定采用哪种方式，这两种方式都不会让页面从新加载。

Hash模式：

咱们常常在url中看到#，这个#有两种做用，一种用来实现锚点功能，一种用来作hash路由，hash是#号后面的部分，单单改变#后的部分是不会刷新页面，不会从新加载页面，同时每一次改变#后的部分，都会在浏览器的访问历史中增长一条记录，使用后退按钮就能够回到上一个页面，Vue-Router就是利用这一点来实现前端路由。主要原理是经过监听 # 后的 URL 路径标识符的更改而触发的浏览器 的hashchange 事件，而后经过获取 location.hash 获得当前的路径标识符，再进行一些路由跳转的操做。

History模式

因为hash模式会在url中自带#，若是不想要很丑的 hash，咱们能够用路由的 history 模式，只须要在配置路由规则时，加入"mode: 'history'"，这种模式充分利用了html5 history interface 中新增的 pushState() 和 replaceState() 方法。这两个方法应用于浏览器记录栈，在当前已有的 back、forward、go 基础之上，它们提供了对历史记录修改的功能。只是当它们执行修改时，虽然改变了当前的 URL ，但浏览器不会当即向后端发送请求。

//main.js文件中
const router = new VueRouter({
  mode: 'history',
  routes: [...]
})
复制代码

当你使用 history 模式时，URL 就像正常的 url，如 yoursite.com/user/id，看上去… oursite.com/user/id就会返回 404，这就很差看了。因此呢，你要在服务端增长一个覆盖全部状况的候选资源：若是 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

export const routes = [ 
  {path: "/", name: "homeLink", component:Home}
  {path: "/register", name: "registerLink", component: Register},
  {path: "/login", name: "loginLink", component: Login},
  {path: "*", redirect: "/"}]
复制代码

此处就设置若是URL输入错误或者是URL 匹配不到任何静态资源，就自动跳到到Home页面。

Vue-Router能够用来管理哈希路由、传递数据

路由源码：juejin.im/post/5cd8d6… mp.weixin.qq.com/s/xVDUtqA-V…