vue-router 两种模式的区别？

vue-router 有 3 种路由模式：hash、history、abstract。

1) hash模式：hash + hashChange

特点：

hash虽然在URL中，但不被包括在HTTP请求中

用来指导浏览器动作，对服务端安全无用，hash不会重加载页面

通过监听 hash（#）的变化来执行js代码从而实现页面的改变

核心代码：

window.addEventListener(‘hashchange‘,function(){

self.urlChange()

})

2) history模式：historyApi + popState

HTML5推出的history API，由pushState()记录操作历史，监听popstate事件来监听到状态变更；

因为只要刷新这个url（www.ff.ff/jjkj/fdfd/fdf/fd）就会请求服务器，然而服务器上根本没有这个资源，所以就会报404，解决方案就配置一下服务器端。

说明：

1）hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器；

2）history : 依赖 HTML5 History API 和服务器配置。具体可以查看 HTML5 History 模式；

3）abstract : 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式.

了解学习更多web前端先技术知识欢迎关注小编专栏！

vue-router 两种模式的区别？相关推荐

vue-router前端路由的两种模式的区别
一.前端路由存在的意义前端路由主要应用在spa项目中. 核心---在无刷新(不向后端发送请求)的情况下,可以根据不同url更改视图. 二.浏览器提供hash 和history 两种模式支持(可以说, ...
蓝牙播放Stereo和Hands-Free AG Audio两种模式的区别？
当使用蓝牙耳机时,发现电脑的播放设备显示了两种模式(如下图所示),Stereo模式下声音正常,而调到Hands-Free AG Audio模式下声音频带窄了很多且音质差,典型的电话音,下面具体说说这两 ...
vue-router两种模式的区别
vue-router两种模式的区别 1.hash模式 vue-router默认的是hash'[hæʃ] '模式,使用URL的hash来模拟一个完整的URL,于是当URL改变的时候,页面不会重新加载,也 ...
Vue-Router前端路由的两种模式、区别、原理？
vue路由有⼏种模式?有什么区别?原理是什么? 一.vue路由有几种模式? 二.两者区别三.原理一.vue路由有几种模式? vue的路由模式⼀共有两种,分别是哈希和history 二.两者区别哈 ...
hash和history两种模式的区别+SpringBoot的特定配置
今天学习到vue-router有两种模式,一种是hash,一种是history模式这两种模式对于后端来说有点区别 1,hash模式这个模式是链接后拼接/#/这样的形式,在实际请求时并不加入#后面的 ...
vue-router 两种模式的区别
vue-router有两种模式,hash模式和history模式,这里来谈谈两者的区别. **hash模式** hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事 ...
git merge 的两种模式的区别 --no-ff与fast forward
git merge 将名字为branchName的分支合并到当前分支有两种模式 git merge <branchName>:fast forward模式,快速合并,看不出做过合并. 不 ...
vue-router的两种模式的区别
1.大家都知道vue是一种单页应用,单页应用就是仅在页面初始化的时候加载相应的html/css/js一单页面加载完成,不会因为用户的操作而进行页面的重新加载或者跳转,用javascript动态的变化h ...
vue-router的两种模式及区别
为什么要有 hash 和 history? 对于 Vue 这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义.前端路由的核心,就在 ...
在IDEA中将项目部署到Tomcat的方法及两种模式的区别
转自:https://www.jianshu.com/p/fb0ed26c35d5 1.添加tomcat服务器点右上角编辑配置编辑配置点击左上角+选择tomcat服务器添加tomcat 配置t ...

vue-router 两种模式的区别？

vue-router 两种模式的区别？相关推荐

最新文章

热门文章