关于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实现前端路由的两种方式的更多相关文章

  1. 【源码拾遗】从vue-router看前端路由的两种实现

    本文由浅入深观摩vue-router源码是如何通过hash与History interface两种方式实现前端路由,介绍了相关原理,并对比了两种方式的优缺点与注意事项.最后分析了如何实现可以直接从文件 ...

  2. vue.js利用vue.router创建前端路由

    node.js方式: 利用node.js安装vue-router模块 cnpm install vue-router 安装完成后我们引入这个模板! 下载vue-router利用script引入方式: ...

  3. Vue-router(前端路由)的两种路由模式

    Vue的两种路由模式: hash.history:默认是hash模式: 前端路由(改变视图的同时不会向后端发出请求) 一.什么是hash模式和history模式? hash模式:是指url尾巴后的#号 ...

  4. 前端路由的两种模式: hash 模式和 history 模式

    随着 ajax 的使用越来越广泛,前端的页面逻辑开始变得越来越复杂,特别是spa的兴起,前端路由系统随之开始流行. 从用户的角度看,前端路由主要实现了两个功能(使用ajax更新页面状态的情况下): 记 ...

  5. 前端路由的两种模式:hash(#)模式和history模式(转)

    随着 ajax 的使用越来越广泛,前端的页面逻辑开始变得越来越复杂,特别是spa的兴起,前端路由系统随之开始流行. 从用户的角度看,前端路由主要实现了两个功能(使用ajax更新页面状态的情况下): 记 ...

  6. vue项目中导出PDF的两种方式

    参考大家导出的方式,基本上是如下两种: 1.使用 html2Canvas + jsPDF 导出PDF, 这种方式什么都好,就是下载的pdf太模糊了.对要求好的pdf这种方式真是不行啊! 2.调用浏览器 ...

  7. [Vue 牛刀小试]:第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制

    一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...

  8. vue路由的两种模式配置以及history模式下面后端如何配置

    vue路由的两种模式配置以及history模式下面后端如何配置 1.hash ——即地址栏URL中的#符号.hash 虽然出现URL中,但不会被包含在HTTP请求中,对后端完全没有影响,因此改变has ...

  9. vue 路由传参 params 与 query两种方式的区别

    初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query.然后,错误就这么来了:  router文件下index.js里面,是这么定义路由的: { p ...

随机推荐

  1. Oracle等待事件之db file scattered read

    1.产生原因 该等待事件通常发生在数据库多块读时,表示发生了与全表扫描和快速索引扫描相关的等待.通常意味着全表扫描过多,或者I/O 能力不足,或者I/O 竞争. 2.确定产生问题对象方法 a)查找全表 ...

  2. 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 ...

  3. 解决SpringMVC中文乱码

    第一种:表单提交后controller获得中文参数后乱码解决方案 注意: 1: form表单提交方式为必须为post,get方式下面spring编码过滤器不起效果 2: jsp页面编码设置为UTF-8 ...

  4. (windows下)tomcat优化--内存,并发.缓存三方面优化

    一.内存 注: jdk1.8中废弃了-XX:PermSize和-XX:MaxPermSize的持久态(存放常量.静态变量区)配置, 多了一个元数据区(Metadata Space:默认为内存的0.2% ...

  5. mysql 数据操作 单表查询 where约束 工作模式

    select name,age from employee where id >7; 1.首先先找到表   from employee 2.表存在 mysql拿着约束条件  去表里 看依次匹配数 ...

  6. mysql 数据操作 单表查询 where约束 like 模糊匹配

    mysql> select * from employee; +----+------------+--------+-----+------------+-----------+------- ...

  7. Spark Streaming带状态更新

    带状态的更新是使用的updateStateByKey方法,里面传入一个函数,函数要自己写,注意需要设置checkpoint import org.apache.spark.streaming.kafk ...

  8. adb shell top 命令

    原文地址https://blog.csdn.net/kittyboy0001/article/details/38562515 原文地址https://blog.csdn.net/u010503912 ...

  9. #C++初学记录(素数判断)

    练习题目二 素数判断 A prime number is a natural number which has exactly two distinct natural number divisors ...

  10. Flask 使用富文本输入框

    模板 <script src="{{ url_for('static', filename='ckeditor/ckeditor.js') }}"></scrip ...