关于vue-router的两种模式以及原理

一、简介
众所周知vue-router 有两种模式
一种是hash模式一种是history模式
首先是hash模式

hash ——即地址栏URL中的#符号
比如这个URL：http://www.baidu.com/#/hello, hash 的值为#/hello。它的特点在于：hash 虽然出现URL中，但不会被包含在HTTP请求中，对后端完全没有影响，因此改变hash不会重新加载页面。
history ——利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法。
（需要特定浏览器支持）这两个方法应用于浏览器的历史记录站，在当前已有的back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改是，虽然改变了当前的URL，但你浏览器不会立即向后端发送请求。

二、404 错误
1、hash模式下，仅hash符号之前的内容会被包含在请求中，如 http://www.abc.com, 因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回404错误；
2、history模式下，前端的url必须和实际向后端发起请求的url 一致，如http://www.abc.com/book/id 。如果后端缺少对/book/id 的路由处理，将返回404错误。

三、原理
hash的原理是采用hashchange事件，
可以在window监听hash的变化。我们在url后面随便添加一个#xx触发这个事件。

history的原理是H5的几个新API
history.pushState(data,title,url)：在浏览器中新增一条历史记录；
data会在onpopstate事件触发时作为参数传递过去，title为页面标题，url为页面地址；

history.replaceState(data,title,url)：在浏览器中替换当前历史记录；
data会在onpopstate事件触发时作为参数传递过去，title为页面标题，url为页面地址；

history.length()：当前历史列表中的历史记录条数；

window.onpopstate：实际上popstate是一个浏览器内置的点击事件，响应pushState和replaceState的触发调用；

history.back(-1):返回到当前页的上一页(原页面表单中的内容会保留)

history.back(0):页面刷新

history.back(1):当前页前进一页

history.go(-1): 返回到当前页的上一页(原页面表单中的内容会丢失，效果基本和history.back(-1)一样

history.forward():当前页面前进一页(和history.back(1)效果一样

此外，history方法可以直接调用，例：history.pushState()，也可以用window.history.pushState()来调用。因为history是属于浏览器中的子对象，两种调用方法都是生效的；

四、设置

const  router = new VueRouter({mode: "XXX",routes: [...]
})

其中如果history模式不生效会回滚到hash模式

关于vue-router的两种模式以及原理相关推荐

vue路由的两种模式：hash与history的区别
前言:众所周知,vue-router有两种模式,hash模式和history模式,下面来看看两者的区别. 一.基本情况直观区别:hash模式url带#号,history模式不带#号. 1.hash模 ...
Vue 路由router的两种模式
两种模式 vue中router可以设两种模式:hash和history.设置方式就是代码中注释的部分. import Vue from 'vue' import Router from 'vue-ro ...
vue router 的两种路由模式hash与history的区别
文章目录两种模式特点总结两种模式前端路由的核心,就在于 -- 改变视图的同时不会向后端发出请求. hash模式是通过改变锚点(#)来更新页面URL,并不会触发页面重新加载,我们可以通过win ...
vue路由之路由的两种模式
文章目录简介 hash路由 history模式两种模式的比较 history存在的问题专栏目录请点击简介一般路由分两种形式一种是哈希路由,最明显的特征就是路由中有一个# 还有一种就是his ...
vue-router前端路由的两种模式的区别
一.前端路由存在的意义前端路由主要应用在spa项目中. 核心---在无刷新(不向后端发送请求)的情况下,可以根据不同url更改视图. 二.浏览器提供hash 和history 两种模式支持(可以说, ...
vue-router 两种模式
路由的两种模式一.更新视图但是不重新请求页面,是前端路由原理的核心之1,目前在浏览器环境中这一功能的实现主要有两种: (1)默认是hash模式,路由上方的路径是用#表示 (2)history是利用U ...
Vue-Router前端路由的两种模式、区别、原理？
vue路由有⼏种模式?有什么区别?原理是什么? 一.vue路由有几种模式? 二.两者区别三.原理一.vue路由有几种模式? vue的路由模式⼀共有两种,分别是哈希和history 二.两者区别哈 ...
VueRouter的两种模式
前后端分离:利用Ajax,可以在不刷新浏览器的情况下异步数据请求交互. 前端路由:匹配不同的url路径,进行解析,加载不同组件,动态渲染内容,不会向后端发出请求.(VueRouter) 单页应用SPA ...
vue-router两种模式
说起vue-rouer,不得不提的一个概念是前端路由,要想深入理解前端路由,不得不了解路由.后端路由.前端路由和后端路由的区别.多页面应用.单页面应用这些概念. 一.捋一捋概念呀先 1.单页面应用与多 ...

关于vue-router的两种模式以及原理

关于vue-router的两种模式以及原理相关推荐

最新文章

热门文章