vue-router原理分析
本文整理总结自: https://zhuanlan.zhihu.com/p/27588422
单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面,
实现这一点主要是两种方式:
1.Hash: 通过改变hash值
2.History: 利用history对象新特性(详情可出门左拐见: http://www.cnblogs.com/yanze/p/7641774.html)
而在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原理分析的更多相关文章
- 虚拟 router 原理分析- 每天5分钟玩转 OpenStack(101)
上一节我们创建了虚拟路由器"router_100_101",并通过 ping 验证了 vlan100 和 vlan101 已经连通. 本节将重点分析其中的原理. 首先我们查看控制节 ...
- 虚拟 router 原理分析
上一节我们创建了虚拟路由器“router_100_101”,并通过 ping 验证了 vlan100 和 vlan101 已经连通. 本节将重点分析其中的原理. 首先我们查看控制节点的 linux b ...
- vue工作原理分析
初始化 在 new Vue() 时会调⽤用_init()进⾏行行初始化,会初始化各种实例例⽅方法.全局⽅方法.执⾏行行⼀一些⽣生命周期. 初始化props. data等状态.其中最重要的是data的「 ...
- [Vue源码分析] v-model实现原理
最近小组有个关于vue源码分析的分享会,提前准备一下… 前言:我们都知道使用v-model可以实现数据的双向绑定,及实现数据的变化驱动dom的更新,dom的更新影响数据的变化.那么v-model是怎么 ...
- 「进阶篇」Vue Router 核心原理解析
前言 此篇为进阶篇,希望读者有 Vue.js,Vue Router 的使用经验,并对 Vue.js 核心原理有简单了解: 不会大篇幅手撕源码,会贴最核心的源码,对应的官方仓库源码地址会放到超上,可以配 ...
- 消息队列NetMQ 原理分析4-Socket、Session、Option和Pipe
消息队列NetMQ 原理分析4-Socket.Session.Option和Pipe 前言 介绍 目的 Socket 接口实现 内部结构 Session Option Pipe YPipe Msg Y ...
- 前端Vue 源码分析-逻辑层
Vue 源码分析-逻辑层 预期的效果: 监听input的输入,input在输入的时候,会触发 watch与computed函数,并且会更新原始的input的数值.所以直接跟input相关的处理就有3处 ...
- dubbo源码解析五 --- 集群容错架构设计与原理分析
欢迎来我的 Star Followers 后期后继续更新Dubbo别的文章 Dubbo 源码分析系列之一环境搭建 博客园 Dubbo 入门之二 --- 项目结构解析 博客园 Dubbo 源码分析系列之 ...
- vue路由原理剖析
单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面, 实现这一点主要是两种方式: 1.Hash: 通过改变hash值 2.History: 利用history对象新特性(详情可出门左拐见: ...
- vue router.push(),router.replace(),router.go()和router.replace后需要返回两次的问题
转载:https://www.cnblogs.com/lwwen/p/7245083.html https://blog.csdn.net/qq_15385627/article/details/83 ...
随机推荐
- Memcache遍历查询所有键值的方法
直接举个Telnet命令行下遍历memcached所有key的方法: stats items STAT items:7:number1 STATitems:7:age188 END stats c ...
- Linux下, Eclipse C/C++ IDE下编辑好C/C++源程序之后要先保存!!!否则,就会……
注意:Linux下, Eclipse C/C++ IDE下编辑好C/C++源程序之后要先保存! ! ! 然后Project-->Build All/Build Project,再点绿箭头执行.否 ...
- Spring Security三种认证
Spring Security: 1.用户名+密码认证 2.手机号+短信认证 Spring Social: 1.第三方认证, QQ登录等 Spring Security OAuth: 1.把认证之后的 ...
- java web 通配符* ? $1 $2 $3
匹配通配符 * 匹配0-n个字符,但不包括“/”.即,“*”只匹配一级目录或文件中的零个或多个字符. ** 匹配0-n个字符,包括“/”.即,“**”匹配多级目录或文件. ? 匹配0-1个字符,但不包 ...
- POJ 3252 Round Numbers 数学题解
Description The cows, as you know, have no fingers or thumbs and thus are unable to play Scissors, P ...
- [译]GLUT教程 - 渲染到子窗体
Lighthouse3d.com >> GLUT Tutorial >> Subwindows >> Rendering to Subwindows 先回顾一下之前 ...
- 天兔插件监控mysql
Lepus3.8-天兔mysql数据库监控系统搭建 原创ixhao2016-08-24 02:36:23评论(11)3183人阅读 Lepus3.8-天兔mysql数据库监控系统搭建 lepus是一款 ...
- 设计模式之前之UML
UML,让系统可视化,让规格和设计文档化的表现方法.下面来简单介绍一下这个UML.
- Call to static DateFormat
Bug: Call to method of static java.text.DateFormatPattern id: STCAL_INVOKE_ON_STATIC_DATE_FORMAT_INS ...
- hihoCoder #1312 : 搜索三·启发式搜索(A*, 康托展开)
原题网址:http://hihocoder.com/problemset/problem/1312 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 在小Ho的手机上有 ...