前言:新一季面试季,重新整理一些知识点;

本文详细说明自己对vue-router原理的理解;

参考:

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

VueRouter包括三个主要组成部分 —— VueRouterrouter-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。

vue-router解析,vue-router原理解析的更多相关文章

  1. 「进阶篇」Vue Router 核心原理解析

    前言 此篇为进阶篇,希望读者有 Vue.js,Vue Router 的使用经验,并对 Vue.js 核心原理有简单了解: 不会大篇幅手撕源码,会贴最核心的源码,对应的官方仓库源码地址会放到超上,可以配 ...

  2. vue.js响应式原理解析与实现

    vue.js响应式原理解析与实现 从很久之前就已经接触过了angularjs了,当时就已经了解到,angularjs是通过脏检查来实现数据监测以及页面更新渲染.之后,再接触了vue.js,当时也一度很 ...

  3. 深度解析 Vue 响应式原理

    深度解析 Vue 响应式原理 该文章内容节选自团队的开源项目 InterviewMap.项目目前内容包含了 JS.网络.浏览器相关.性能优化.安全.框架.Git.数据结构.算法等内容,无论是基础还是进 ...

  4. 深入解析vue.js响应式原理与实现

    vue.js响应式原理解析与实现.angularjs是通过脏检查来实现数据监测以及页面更新渲染.之后,再接触了vue.js,当时也一度很好奇vue.js是如何监测数据更新并且重新渲染页面.vue.js ...

  5. 全面解析Vue.nextTick实现原理

    vue中有一个较为特殊的API,nextTick.根据官方文档的解释,它可以在DOM更新完毕之后执行一个回调,用法如下: // 修改数据 vm.msg = 'Hello' // DOM 还没有更新 V ...

  6. [转] Vue原理解析——自己写个Vue

    一.Vue对比其他框架原理 Vue相对于React,Angular更加综合一点.AngularJS则使用了“脏值检测”. React则采用避免直接操作DOM的虚拟dom树.而Vue则采用的是 Obje ...

  7. vue响应式原理解析

    # Vue响应式原理解析 首先定义了四个核心的js文件 - 1. observer.js 观察者函数,用来设置data的get和set函数,并且把watcher存放在dep中 - 2. watcher ...

  8. Vue双向绑定的实现原理系列(四):补充指令解析器compile

    补充指令解析器compile github源码 补充下HTML节点类型的知识: 元素节点 Node.ELEMENT_NODE(1) 属性节点 Node.ATTRIBUTE_NODE(2) 文本节点 N ...

  9. Vue原理解析——自己写个Vue

    Vue由于其高效的性能和灵活入门简单.轻量的特点下变得火热.在当今前端越来越普遍的使用,今天来剖析一下Vue的深入响应式原理. tips:转自我的博客唐益达博客,此为原创.转载请注明出处,原文链接 一 ...

随机推荐

  1. a标签点击,页面自动刷新

    <a href="javascript:void(0)" id="reDiagnosis" class="checkBtn"oncli ...

  2. virt-manager 使用 shh 远程访问配置方法

    1.下载安装 Xming+Xshell  或者 Xming+putty,启动Xming服务 Xming下载地址 2.XMing的配置:打开XLaunch,记住Display Number,现在这里是0 ...

  3. eigen 中四元数、欧拉角、旋转矩阵、旋转向量

    一.旋转向量 1.0 初始化旋转向量:旋转角为alpha,旋转轴为(x,y,z) Eigen::AngleAxisd rotation_vector(alpha,Vector3d(x,y,z)) 1. ...

  4. 洛谷P4095新背包问题

    传送 这道题最最暴力的方法就是对于每一个询问都跑一边多重背包问题,但显然q不会那么友好的让我们用暴力过掉这道题. 考虑优化.我们可以先把裸的多重背包搞成二进制优化后的多重背包.但是复杂度依然无法接受. ...

  5. C# 图片文件文本string格式 传输问题

    string file = @"E:\test.png"; byte[] bytes = File.ReadAllBytes(file); // 主要代码 string datas ...

  6. Python 笔试集(3):编译/解释?动态/静态?强/弱?Python 是一门怎样的语言

    面试题 解释/编译?动态/静态?强/弱?Python 到底是一门怎样的语言? 编译 or 解释? 编译.解释都是指将(与人类亲和的)编程语言翻译成(计算机能够理解的)机器语言(Machine code ...

  7. delphi assigned函数的用法

    if not Assigned(Modeless) then Assigned()什么意思! assigned 是用来判断某一指针(pointer)或过程引用是否为nil(空),如果为空则返回假(fa ...

  8. oracle dis系列课程总结

    oracle dis系列课程总结 1 bbed安装和介绍 --1 bbed的安装--(Oracle Block Brower and EDitor Tool) 2 controlfile 丢失的恢复 ...

  9. Java基础之 多线程

    一.创建多线程程序的第一种方式: 继承(extends) Thread类 Thread类的子类: MyThread //1.创建一个Thread类的子类 public class MyThread e ...

  10. 【Linux开发】V4L2驱动框架分析学习

    Author:CJOK Contact:cjok.liao#gmail.com SinaWeibo:@廖野cjok 1.概述 Video4Linux2是Linux内核中关于视频设备的内核驱动框架,为上 ...