vue-router解析，vue-router原理解析

前言：新一季面试季，从新整理一些知识点；

本文详细说明本身对vue-router原理的理解；

 

参考：

• 源码：vuejs/vue-router v2.2.1 - github
• 文档：vue-router 官方中文教程
• 参考博客 ：http://cnodejs.org/topic/58d680c903d476b42d34c72b

 

 

VueRouter包括三个主要组成部分 —— VueRouter、router-view和 router-link：

• VueRouter ：路由器类，根据路由请求在路由视图中动态渲染选中的组件
• router-link ：路由连接组件，声明用以提交路由请求的用户接口
• router-view：路由视图组件，负责动态渲染路由选中的组件

前端路由直接找到与地址匹配的一个组件或者对象而后进行渲染，

实现这一点主要是两种方式:

1.Hash: 经过改变hash值

2.History: 利用history对象新特性

history模式须要服务端的配合，而hash模式不须要

而在vue-router中，它提供mode参数来决定采用哪种方式，选择流程以下:

默认Hash-->若是浏览器支持History新特性改用History-->若是不在浏览器环境则使用abstract

选好mode后建立history对象(HashHistory或HTML5History或AbstractHistory)

可见最被青睐的是History模式，理由是: "#"太丑了。。。

 

基本方法分析:

Hash

1.push()

功能: 设置新的路由添加历史记录并更新视图,经常使用状况是直接点击切换视图

调用流程:

1 $router.push() //显式调用方法

2 HashHistory.push() //根据hash模式调用,设置hash并添加到浏览器历史记录（window.location.hash= XXX）

3 History.transitionTo() //开始更新

4 History.updateRoute()  //更新路由

5 {app._route= route} 

6 vm.render() //更新视图

 

2.replace

功能: 替换当前路由并更新视图，经常使用状况是地址栏直接输入新地址

流程与push基本一致

但流程2变为替换当前hash （window.location.replace= XXX）不懂此方法的可见: http://www.w3school.com.cn/jsref/met_loc_replace.asp

 

3.监听地址栏变化

在setupListeners中监听hash变化(window.onhashchange)并调用replace

 

History

1.push

与hash模式相似，只是将window.hash改成history.pushState

2.replace

与hash模式相似，只是将window.replace改成history.replaceState

3.监听地址变化

在HTML5History的构造函数中监听popState（window.onpopstate）

 

两种模式对比

History模式的优势:

1.History模式的地址栏更美观。。。

2.History模式的pushState、replaceState参数中的新URL可为同源的任意URL（可为不一样的html文件），而hash只能是同一文档

3.History模式的pushState、replaceState参数中的state可为js对象，能携带更多数据

4.History模式的pushState、replaceState参数中的title能携带字符串数据（固然，部分浏览器，例如firefox不支持title，通常title设为null，不建议使用）

缺点:

对于单页面应用来讲，理想的场景是仅仅在进入应用时加载页面（例如index.html）,后续的网络操做靠ajax完成，

而不会从新请求页面。

但当用户直接在用户栏输入地址时则会从新请求，当地址带有参数时二者状况不同

Hash 例如: xxx.com/#/id=5 HTTP请求不会包含后面的hash值，因此请求的仍然是 xxx.com,没有问题

History 例如:  xxx.com/id=5 这时请求的即是xxx.com/id=5，如后端没有配置对应id=XXX的路由处理，则会返回404错误。

官方推荐的解决办法是在服务端增长一个覆盖全部状况的候选资源：若是 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。同时这么作之后，服务器就再也不返回 404 错误页面，由于对于全部路径都会返回 index.html 文件。为了不这种状况，在 Vue 应用里面覆盖全部的路由状况，而后在给出一个 404 页面。或者，若是是用 Node.js 做后台，可使用服务端的路由来匹配 URL，当没有匹配到路由的时候返回 404，从而实现 fallback。