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。
最新文章
- About next_permutation
- WIN7下搭建CORDOVA环境
- JavaScript事件对象【转】
- 黄聪:PHP解决textarea内容换行存入数据库,如何解析取出不能自动换行
- 部署ganglia3.7
- intel vt-x处于禁用状态下如何处理
- centos 编译swoole
- Log4J入门教程(二) 参数讲解
- Context上下文
- Traveller项目技术资料
- SQLserver数据库基础
- ImportError: No module named pysqlite2 --安装pysqlite
- leetcode 15. 3Sum 双指针
- Celery 源码解析四: 定时任务的实现
- [yum] yum使用光盘安装或更新软件
- TM-align TM-score安装
- sqlserver表结构的修改
- dom2级事件兼容性写法
- 【LeetCode】414. 第三大的数
- Docker学习--Linux基础准备篇
热门文章
- HDU 4417 划分树+二分
- Quartus和ISE调用Synplify进行综合的问题
- grep -rl tttt /data/ 命令在 /data 目录下面搜寻包含tttt字符的命令
- 【Selenium + Python】之OSError: [WinError 6] 句柄无效。
- 创建一个动态Web项目:
- 文件大小转换(b,kb,M,GB/TB)
- 使用Swoole加速Laravel(正式环境中)
- centos7.0 安转mysql5.7
- Asp.Net MVC3中如何进行单元测试?
- jar -cmf file1 file2 file3命令