浅析使用vue-router实现前端路由的两种方式
关于vue-router
由于最近的项目中一直在使用vue,所以前端路由方案也是使用的官方路由vue-router,之前在angularJS项目中也是用过UI-router,感觉大同小异,不过很显然vue-router更友好一些。本文就以vue-router为例浅析我所理解的前端路由,具体用法和一些基本语法就不一一介绍了,官方文档说的更加清晰
关于前端路由
据我所知,在现在这些MVC和MVVM框架兴起之前,是不存在前端路由的,页面之间的跳转是由后台控制的。随着前后端分离和单页面应用(SPA)的兴起和WEB项目复杂度的增加,再加上前面这些框架的支持,慢慢前端路由也就成为了现实。单页面应用的特点就是可以在改变URL在不重新请求页面的情况下更新页面视图。
"更新视图但不重新请求页面"是前端路由的原理的核心之一,目前在浏览器环境中这一功能的实现主要有两种方式
- 利用URL中的hash("#")
- 利用History interface在 HTML5中新增的方法
下面我们就来看看vue-router是如何通过这两种方式来实现前端路由的
vue-router实现前端路由的方法和对比
使用过vue-router的都知道,在vue-router中有mode这样一个参数,这个参数的可选值有"hash"、 "history"、"abstract"
const router = new VueRouter({
mode: 'history',
routes: [...]
})
对应我们上面讲到的两种方式来说,hash就是第一种方式,history就是第二种方式,而第三种是在nodejs下的默认实现方式。
那"hash"和"history"这两种方式各有什么优劣呢?
- 首先在vue-router中默认使用的是hash这种方式,因为这种方式虽然带个#有点丑(官方竟然都这样说),但是不存在兼容性问题
- 而history由于底层的实现根据MDN的介绍,调用history.pushState(),所以存在浏览器兼容性问题。
- 如果不考虑兼容性问题的话,pushState肯定比只修改hash值更加强大,因为可以设置任意同源URL
- pushState可以设置和当前URL一模一样,这样也会把记录添加到栈中,而hash设置的新值必须和原来不一样
- 还有,就算不考虑兼容问题的话,history模式还有一个问题,就是history模式会将URL修改的和正常请求后端的URL一样
http://oursite.com/user/id
这样的话如果后端没有配置对应的user/id这样一个地址的话就会返回404,官方推荐的解决办法是在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。同时这么做以后,服务器就不再返回 404 错误页面,因为对于所有路径都会返回 index.html 文件。为了避免这种情况,在 Vue 应用里面覆盖所有的路由情况,然后在给出一个 404 页面。(这种方案我还没实践过,有机会要实践一下)
- 所以综合考虑来说用在一些中后台项目中的话一般直接就采用hash这种默认方式了,而前台项目的话看需求选择使用history还是hash
后记
在写这篇文章之前看了一个大神写的分析vue-router的文章,每得出一个结论之前都是截取了相应的源文件,真的是做到了 有理有据,实在佩服。我文中之所以没引用是因为实在没有通读过vue-router的源码,也还不是看的太懂,所以就不班门弄斧了,但是在看这篇文章的过程中也慢慢打消了一些对源代码的恐惧,原来源代码也没那么晦涩难懂,认真看还是能看懂大部分的,所以以后移动要多多读这样的文章,慢慢试着去看看源代码,那样得到的结论才是最有一句的,而不是人云亦云,加油!
参考文章:
浅析使用vue-router实现前端路由的两种方式的更多相关文章
- 【源码拾遗】从vue-router看前端路由的两种实现
本文由浅入深观摩vue-router源码是如何通过hash与History interface两种方式实现前端路由,介绍了相关原理,并对比了两种方式的优缺点与注意事项.最后分析了如何实现可以直接从文件 ...
- vue.js利用vue.router创建前端路由
node.js方式: 利用node.js安装vue-router模块 cnpm install vue-router 安装完成后我们引入这个模板! 下载vue-router利用script引入方式: ...
- Vue-router(前端路由)的两种路由模式
Vue的两种路由模式: hash.history:默认是hash模式: 前端路由(改变视图的同时不会向后端发出请求) 一.什么是hash模式和history模式? hash模式:是指url尾巴后的#号 ...
- 前端路由的两种模式: hash 模式和 history 模式
随着 ajax 的使用越来越广泛,前端的页面逻辑开始变得越来越复杂,特别是spa的兴起,前端路由系统随之开始流行. 从用户的角度看,前端路由主要实现了两个功能(使用ajax更新页面状态的情况下): 记 ...
- 前端路由的两种模式:hash(#)模式和history模式(转)
随着 ajax 的使用越来越广泛,前端的页面逻辑开始变得越来越复杂,特别是spa的兴起,前端路由系统随之开始流行. 从用户的角度看,前端路由主要实现了两个功能(使用ajax更新页面状态的情况下): 记 ...
- vue项目中导出PDF的两种方式
参考大家导出的方式,基本上是如下两种: 1.使用 html2Canvas + jsPDF 导出PDF, 这种方式什么都好,就是下载的pdf太模糊了.对要求好的pdf这种方式真是不行啊! 2.调用浏览器 ...
- [Vue 牛刀小试]:第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制
一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...
- vue路由的两种模式配置以及history模式下面后端如何配置
vue路由的两种模式配置以及history模式下面后端如何配置 1.hash ——即地址栏URL中的#符号.hash 虽然出现URL中,但不会被包含在HTTP请求中,对后端完全没有影响,因此改变has ...
- vue 路由传参 params 与 query两种方式的区别
初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query.然后,错误就这么来了: router文件下index.js里面,是这么定义路由的: { p ...
随机推荐
- Oracle等待事件之db file scattered read
1.产生原因 该等待事件通常发生在数据库多块读时,表示发生了与全表扫描和快速索引扫描相关的等待.通常意味着全表扫描过多,或者I/O 能力不足,或者I/O 竞争. 2.确定产生问题对象方法 a)查找全表 ...
- HyperLogLog in Practice: Algorithmic Engineering of a State of The Art Cardinality Estimation Algorithm
HyperLogLog参考下面这篇blog, http://blog.codinglabs.org/articles/algorithms-for-cardinality-estimation-par ...
- 解决SpringMVC中文乱码
第一种:表单提交后controller获得中文参数后乱码解决方案 注意: 1: form表单提交方式为必须为post,get方式下面spring编码过滤器不起效果 2: jsp页面编码设置为UTF-8 ...
- (windows下)tomcat优化--内存,并发.缓存三方面优化
一.内存 注: jdk1.8中废弃了-XX:PermSize和-XX:MaxPermSize的持久态(存放常量.静态变量区)配置, 多了一个元数据区(Metadata Space:默认为内存的0.2% ...
- mysql 数据操作 单表查询 where约束 工作模式
select name,age from employee where id >7; 1.首先先找到表 from employee 2.表存在 mysql拿着约束条件 去表里 看依次匹配数 ...
- mysql 数据操作 单表查询 where约束 like 模糊匹配
mysql> select * from employee; +----+------------+--------+-----+------------+-----------+------- ...
- Spark Streaming带状态更新
带状态的更新是使用的updateStateByKey方法,里面传入一个函数,函数要自己写,注意需要设置checkpoint import org.apache.spark.streaming.kafk ...
- adb shell top 命令
原文地址https://blog.csdn.net/kittyboy0001/article/details/38562515 原文地址https://blog.csdn.net/u010503912 ...
- #C++初学记录(素数判断)
练习题目二 素数判断 A prime number is a natural number which has exactly two distinct natural number divisors ...
- Flask 使用富文本输入框
模板 <script src="{{ url_for('static', filename='ckeditor/ckeditor.js') }}"></scrip ...