Vue的两种路由模式: hash、history;默认是hash模式; 前端路由(改变视图的同时不会向后端发出请求)

一、什么是hash模式和history模式?

  hash模式:是指url尾巴后的#号以及后面的字符。hash也称为锚点,本身是用来做页面定位的,它可以使对应的id元素显示在可视区域。hash虽然出现在url中,但不会被包括在http请求中,对后端完全没有影响,因此改变hash不会被重新加载页面。

  hash值的变化不会导致浏览器向服务器发出请求,而hash改变会触发hashchange事件(只改变#后面的url片段);hash发生变化url都会被浏览器记录下来,从而可以使用浏览器的前进和后退。又称为前端路由,单页面应用的标配。

  history模式:

二、hash和history模式背后的原理?

  hash:hashchange事件,可以在window对象上监听这个事件:

window.location.hash = 'qq'  // 设置url的hash,会在当前的url后加上'#qq'   
ar hash = window.location.hash // 值为 '#qq'
window.addEventListener('hashchange',function() {
// 监听hash变化,点击浏览器的前进后退会触发
})

  history:利用了HTML5新增的pushState()和replaceState()方法,需要特定的浏览器支持;

  --history 的api可以分为两个部分:切换和修改(参考MDN)

  --切换历史状态包括back\forward\go 方法: history.go()\history.forward()\history.back()

  ==修改历史状态包括pushState和replaceState两个方法

window.history.pushState(state, title, url)
// state: 需要保存的数据,这个数据在触发popstate事件时,可以在event.state里获取
// title:标题,一般为null
// url:设定新的历史记录url。新的url与当前的url的origin必须时一样的,url可以是绝对路径也可以是相对路径
// 例如:当前的url: https://www.baidu.com/a/,执行history.pushState(null, null, './qq/'),则变成 https://www.baidu.com/a/qq/,
// 执行 history.pushState(null, null, '/qq/'),则会变成https://baidu.com/qq/ window.history.replaceState(state,title,url)
// 与pushState方法一样,但它是修改当前的历史记录,而pushState是创建新的历史记录

window.addEventListener('popstate',function(){
// 监听浏览器的前进和后退事件,pushState和replaceState方法不会触发
})
// history模式:改变url的方式会导致浏览器向服务器端发送请求,我们需要在服务器端做处理:如果匹配不到任何的静态页面,则应该始终返回同一个html页面。搭配前端路由的404页面支持。

  hash和history都是属于浏览器自身的特性,Vue-router只是利用了这两个特性(通过调用浏览器接口)来实现前端路由。

三、缺点:

  hash:

    1.本来是拿来做页面定位的,如果拿来做路由的话,原来的锚点功能就不能用了;

    2.传参是基于url的,如果传递复杂的数据,会又体积的限制,而history模式不仅可以在url里放参数,还可以将数据放在一个特定的对象中。

  history:页面F5书刷新时会出现404; 前端的 URL 必须和实际向后端发起请求的 URL 一致,否则会返回404错误。

Vue-router(前端路由)的两种路由模式的更多相关文章

  1. 浅析使用vue-router实现前端路由的两种方式

    关于vue-router 由于最近的项目中一直在使用vue,所以前端路由方案也是使用的官方路由vue-router,之前在angularJS项目中也是用过UI-router,感觉大同小异,不过很显然v ...

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

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

  3. vue中使用echarts的两种方法

    在vue中使用echarts有两种方法一.第一种方法1.通过npm获取echarts npm install echarts --save 2.在vue项目中引入echarts 在 main.js 中 ...

  4. Vue路由器的hash和history两种工作模式 && Vue项目编译部署

    1 # 一.Vue路由器的两种工作模式 2 # 1.对于一个uri来说,什么是hash值? 井号及其后面的内容就是hash值. 3 # 2.hash值不会包括含在HTTP请求中,即:hash值不会带给 ...

  5. 用easyui从servlet传递json数据到前端页面的两种方法

    用easyui从servlet传递json数据到前端页面的两种方法 两种方法获取的数据在servlet层传递的方法相同,下面为Servlet中代码,以查询表中所有信息为例. //重写doGet方法 p ...

  6. ASP.Net的两种开发模式

    一.ASP.Net的两种开发模式 1.1 ASP.Net WebForm的开发模式 (1)处理流程 在传统的WebForm模式下,我们请求一个例如http://www.aspnetmvc.com/bl ...

  7. JAVA学习篇--JAVA两种编程模式控制

    在Drp项目中,解说了两种编程模式Model 1和Model2.以下是对这两种模式的简单理解.以及因为Model2是基于MVC架构的模式,就将我们易混淆的MVC与我们之前学的三层架构进行对照学习一下. ...

  8. IIS在ASP.NET Core下的两种部署模式

    KestrelServer最大的优势体现在它的跨平台的能力,如果ASP.NET CORE应用只需要部署在Windows环境下,IIS也是不错的选择.ASP.NET CORE应用针对IIS具有两种部署模 ...

  9. java web学习总结(二十九) -------------------JavaBean的两种开发模式

    SUN公司推出JSP技术后,同时也推荐了两种web应用程序的开发模式,一种是JSP+JavaBean模式,一种是Servlet+JSP+JavaBean模式. 一.JSP+JavaBean开发模式 1 ...

随机推荐

  1. 学习Redis(一)

    一.NoSQL 1.NoSql介绍 1.not only SQL,非关系型数据库,它能解决常规数据库的并发.IO与性能的瓶颈 2.解决以下问题: ① 对数据库的高并发读写需求 ② 大数据的高效存储和访 ...

  2. springboot-mail发邮件,不需要邮件服务器

    很简单 步骤走起-> 1.需要一个邮箱账号,我以163邮箱为例,先开启第三方服务后获得密码,后面用来邮箱登录 2.加入mail 依赖 3.properties配置账号和第三方服务密码(不是邮箱密 ...

  3. java支持多继承吗

    java不支持多继承,只支持单继承(即一个类只能有一个父类).但是java接口支持多继承,即一个子接口可以有多个父接口.(接口的作用是用来扩展对象的功能,一个子接口继承多个父接口,说明子接口扩展了多个 ...

  4. 圣诞节,把网站所有的js代码都压缩成圣诞树吧。

    本文分两章节,分别讲解如何使用js2image这个库生成可以运行的圣诞树代码 和 js2image的原理. github地址:https://github.com/xinyu198736/js2ima ...

  5. CSS的inline、block与inline-block

    基本知识点 行内元素一般是内容的容器,而块级元素一般是其他容器的容器,行内元素适合显示具体内容,而块级元素适合做布局. 块级元素(block):独占一行,对宽高的属性值生效:如果不给宽度,块级元素就默 ...

  6. Bitmap图片的处理

      一.View转换为Bitmap 在Android中所有的控件都是View的直接子类或者间接子类,通过它们可以组成丰富的UI界面.在窗口显示的时候Android会把这些控件都加载到内存中,形成一个以 ...

  7. IDEA个人常用快捷键

    Ctrl+Z:撤销 Ctrl+Shift+Z:重做 Ctrl+X:剪贴 Ctrl+C:复制 Ctrl+V:粘贴 Ctrl+Y:删除当前行 Ctrl+D:复制当前行 Alt+向左箭头:返回上次光标位置 ...

  8. 反射常用API以及内省机制(代码)

    学习内容: (1)获取构造函数 这里不贴Person类了,不然代码太多太乱了,只给出一些常用API // 创建字节码对象 Class<?> aClass = Class.forName(& ...

  9. Python入门-多进程

    1.获取本机CPU # 早期的CPU是单核:实现多个程序并行,在某一时间点,其实只有一个进程 # 后来硬件多核CPU:多个进程是并行执行. from multiprocessing import cp ...

  10. Java学习day23

    今天学习了下拉框实现与简单游戏的实现 package com.Cra2iTeT.snake; import javax.swing.*; import java.awt.*; import java. ...