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。
vue-router解析,vue-router原理解析的更多相关文章
- 「进阶篇」Vue Router 核心原理解析
前言 此篇为进阶篇,希望读者有 Vue.js,Vue Router 的使用经验,并对 Vue.js 核心原理有简单了解: 不会大篇幅手撕源码,会贴最核心的源码,对应的官方仓库源码地址会放到超上,可以配 ...
- vue.js响应式原理解析与实现
vue.js响应式原理解析与实现 从很久之前就已经接触过了angularjs了,当时就已经了解到,angularjs是通过脏检查来实现数据监测以及页面更新渲染.之后,再接触了vue.js,当时也一度很 ...
- 深度解析 Vue 响应式原理
深度解析 Vue 响应式原理 该文章内容节选自团队的开源项目 InterviewMap.项目目前内容包含了 JS.网络.浏览器相关.性能优化.安全.框架.Git.数据结构.算法等内容,无论是基础还是进 ...
- 深入解析vue.js响应式原理与实现
vue.js响应式原理解析与实现.angularjs是通过脏检查来实现数据监测以及页面更新渲染.之后,再接触了vue.js,当时也一度很好奇vue.js是如何监测数据更新并且重新渲染页面.vue.js ...
- 全面解析Vue.nextTick实现原理
vue中有一个较为特殊的API,nextTick.根据官方文档的解释,它可以在DOM更新完毕之后执行一个回调,用法如下: // 修改数据 vm.msg = 'Hello' // DOM 还没有更新 V ...
- [转] Vue原理解析——自己写个Vue
一.Vue对比其他框架原理 Vue相对于React,Angular更加综合一点.AngularJS则使用了“脏值检测”. React则采用避免直接操作DOM的虚拟dom树.而Vue则采用的是 Obje ...
- vue响应式原理解析
# Vue响应式原理解析 首先定义了四个核心的js文件 - 1. observer.js 观察者函数,用来设置data的get和set函数,并且把watcher存放在dep中 - 2. watcher ...
- Vue双向绑定的实现原理系列(四):补充指令解析器compile
补充指令解析器compile github源码 补充下HTML节点类型的知识: 元素节点 Node.ELEMENT_NODE(1) 属性节点 Node.ATTRIBUTE_NODE(2) 文本节点 N ...
- Vue原理解析——自己写个Vue
Vue由于其高效的性能和灵活入门简单.轻量的特点下变得火热.在当今前端越来越普遍的使用,今天来剖析一下Vue的深入响应式原理. tips:转自我的博客唐益达博客,此为原创.转载请注明出处,原文链接 一 ...
随机推荐
- 理解ES6中的Iterator
一.为什么使用Iterator 我们知道,在ES6中新增了很多的特性,包括Map,Set等新的数据结构,算上数组和对象已经有四种数据集合了,就像数组可以使用forEach,对象可以使用for...in ...
- laravel 添加后台登陆守护器
后台不能在一个浏览器登陆,下面简单配置下即可解决这个问题. 设置路由如下: <?php /** * 后台路由,从Illuminate\Routing\Router控制器的auth()方法中复制过 ...
- 别把&和nohup混为一谈, 根本不是同一个东西好不好 ------ 聊聊./a.out & , nohut ./a.out , nohup ./a.out &的区别
在第一家公司工作的时候, 我认识了&,在第二家公司工作的时候, 我认识了nohup, 这就是渊源. 随后, 我就一直糊涂用他们, 但并不懂这两个东西. 网上很多地方是乱扯, 瞎复制, 为什 ...
- Java之类的继承
说起来Java的类,不得不说以下几个方面:继承.转型.重写.多态和接口. 今天来说一说继承,转型和重写几个方面: 继承(extends)即子类继承父类,就好比玻璃杯.保温杯等子类继承了杯子这个父类,子 ...
- Oracle 高版本往低版本备份恢复的方法
1. 高版本的数据库备份恢复到低版本的数据库 有时候回报错, 提示version版本不一致, 2. 其实方法是expdp 导出的时候 增加一个参数就可以了 参数 一般的类型是 version=11.2 ...
- glide使用总结
1 glide是什么 glide是一个图片加载和缓存库. 2 glide的使用 第一,添加依赖 implementation 'com.github.bumptech.glide:glide:4.5. ...
- Docker数据持久化及实战(Nginx+Spring Boot项目+MySQL)
Docker数据持久化: Volume: (1)创建mysql数据库的container docker run -d --name mysql01 -e MYSQL_ROOT_PASSWORD= my ...
- windows上zeal安装和使用--离线API文档
1.官网:https://zealdocs.org/download.html#windows 2.github:https://github.com/zealdocs/zeal 3.下载:可下载安装 ...
- 一个简单的Vue.js组件开发示例
//创建属于自己的vue组件库 (function(Vue, undefined) { Vue.component("my-component", { template: '< ...
- A - 卿学姐与公主(线段树+单点更新+区间极值)
A - 卿学姐与公主 Time Limit: 2000/1000MS (Java/Others) Memory Limit: 65535/65535KB (Java/Others) Submi ...