vue-router的两种模式的区别_lla520的博客-CSDN博客
vue-router的两种模式的区别
lla520
于 2017-09-08 15:05:55 发布
40210
收藏
21
众所周知，vue-router有两种模式，hash模式和history模式，这里来谈谈两者的区别。
hash模式
hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件:
window.onhashchange = function(event){
console.log(event.oldURL, event.newURL);
let hash = location.hash.slice(1);
document.body.style.color = hash;
上面的代码可以通过改变hash来改变页面字体颜色，虽然没什么用，但是一定程度上说明了原理。
更关键的一点是，因为hash发生变化的url都会被浏览器记录下来，从而你会发现浏览器的前进后退都可以用了，同时点击后退时，页面字体颜色也会发生变化。这样一来，尽管浏览器没有请求服务器，但是页面状态和url一一关联起来，后来人们给它起了一个霸气的名字叫前端路由，成为了单页应用标配。
网易云音乐，百度网盘就采用了hash路由，看起来就是这个样子:
http://music.163.com/#/friend
https://pan.baidu.com/disk/home#list/vmode=list
history路由
随着history api的到来，前端路由开始进化了,前面的hashchange，你只能改变#后面的url片段，而history api则给了前端完全的自由
history api可以分为两大部分，切换和修改，参考MDN
切换历史状态
包括back,forward,go三个方法，对应浏览器的前进，后退，跳转操作，有同学说了，(谷歌)浏览器只有前进和后退，没有跳转，嗯，在前进后退上长按鼠标，会出来所有当前窗口的历史记录，从而可以跳转(也许叫跳更合适)：
history.go(-2);//后退两次
history.go(2);//前进两次
history.back(); //后退
hsitory.forward(); //前进
修改历史状态
包括了pushState,replaceState两个方法,这两个方法接收三个参数:stateObj,title,url
history.pushState({color:'red'}, 'red', 'red'})
window.onpopstate = function(event){
console.log(event.state)
if(event.state && event.state.color === 'red'){
document.body.style.color = 'red';
history.back();
history.forward();
通过pushstate把页面的状态保存在state对象中，当页面的url再变回这个url时，可以通过event.state取到这个state对象，从而可以对页面状态进行还原，这里的页面状态就是页面字体颜色，其实滚动条的位置，阅读进度，组件的开关的这些页面状态都可以存储到state的里面。
history模式怕啥
通过history api，我们丢掉了丑陋的#，但是它也有个毛病： 不怕前进，不怕后退，就怕刷新，f5，（如果后端没有准备的话）,因为刷新是实实在在地去请求服务器的,不玩虚的。
在hash模式下，前端路由修改的是#中的信息，而浏览器请求时是不带它玩的，所以没有问题.但是在history下，你可以自由的修改path，当刷新时，如果服务器中没有相应的响应或者资源，会分分钟刷出一个404来。
所以，如果你想在github.io上搭一个单页博客，就应该选择hash模式。比如这个博客
lla520
关注
关注
点赞
21
收藏
评论
vue-router的两种模式的区别
众所周知，vue-router有两种模式，hash模式和history模式，这里来谈谈两者的区别。hash模式hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件:window.onhashchange = function(event){ console.log(event.oldURL, event.newURL);
复制链接
扫一扫
Vue的三种路由模式
yiwai6998的博客
11-05
1万+
路由模式解析
这里要讲vue-router的路由模式，首先要了解的一点就是路由是由多个URL组成的，使用不同的URL可以相应的导航到不同的位置。如果有进行过服务器开发或者对http协议有所了解就会知道，浏览器中对页面的访问是无状态的，所以我们在切换不同的页面时都会重新进行请求。而实际使用vue和vue-router开发就会明白，在切换页面时是没有重新进行请求也没有重新刷新页面，使用起来就好像页面是有状态的，这是什么原因呢。这其实是借助了浏览器的History API来实现的，这样可以使得页面跳转而不刷新，页
Vue-Router路由详解------路由的使用和模式
weixin_53027472的博客
10-10
137
vue-router的基本使用和两种路由模式
评论 1
您还未登录，请先
登录
后发表或查看评论
vue-router的两种模式及区别
兔子juan的博客
08-26
9583
为什么要有 hash 和 history？
对于 Vue 这类渐进式前端开发框架，为了构建 SPA（单页面应用），需要引入前端路由系统，这也就是 Vue-Router 存在的意义。前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。
为了达到这一目的，浏览器当前提供了以下两种支持：
hash —— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。
比...
VueRouter的两种模式
最新发布
weixin_43611411的博客
11-09
339
VueRouter的两种模式——学习笔记
Vue 路由router的两种模式
公众号：BennuCTech
01-18
6050
两种模式
vue中router可以设两种模式：hash和history。设置方式就是代码中注释的部分。
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
// mode: 'history',
routes: [
path: '/'
vue-router两种模式的区别
Bald_monster的博客
12-29
3093
vue-router两种模式的区别
1.hash模式
vue-router默认的是hash’[hæʃ] '模式，使用URL的hash来模拟一个完整的URL，于是当URL改变的时候，页面不会重新加载，也就是单页面应用了。当#后面的hash发生变化，不会导致浏览器向服务器发出请求，浏览器不会发出请求就不会刷新页面，并且会触发hasChange这个事件，通过监听hash值的变化来实现更新页面部分内容的操作。
对于hash模式会创建hashHistory对象，在访问不同的路由的时候，会发生两件事：
HashHist
vue路由的两种模式：hash与history的区别
qq_26780317的博客
06-11
6893
前言：众所周知，vue-router有两种模式，hash模式和history模式，下面来看看两者的区别。
一、基本情况
直观区别：hash模式url带#号，history模式不带#号。
1.hash模式
hash就是指url尾巴后的#号以及后面的字符。这里的#和css里的#是一个意思。hash也被称为锚点，本身是用来做页面定位的，它可以是对应的id元素显示在可视区域内。
由于hash值变化不会导致游览器向服务器发出请求，而且hash改变会...
前端两种路由模式的原理与区别
IT教育任姐姐的博客
03-11
551
前端路由原理？两种路由的实现方式有什么区别？
一般比较
hash history abstract 前端路由主要应用在SPA（单页面开发）项目中。在无刷新的情况下，根据不同的URL来显示不同的组件或者内容。
1.hash模式
www.test.com/#/就是 Hash URL，当#后面的哈希值发生变化时，可以通过hashchange事件来监听到 URL 的变化，从而进行跳转页面，并且无论哈希值如何变化，服务端接收到的 URL 请求永远是www.test.com。Hash 模式相对来说更简单，并且兼
vue-router的两种模式区别以及使用注意事项
王永存
08-18
4万+
Vue Router 是Vue官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。vue-router 默认 hash 模式，还有一种是history模式。
hash模式
hash模式的工作原理是hashchange事件，可以在window监听hash的变化。我们在url后面随便添加一个#xx触发这个事件。
window.onhashchange = f...
Vue-Router的两种路由模式
林见鹿鸣
09-29
1783
H5 History模式
官网描述
vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。
如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。
const router = new VueRouter({
mode: 'history',
routes: [...]
})
当你使用 hi
vue路由的两种模式，hash与history的区别
DomCode
01-23
2336
1.直观区别：
hash模式url带#号，history模式不带#号。
2.深层区别：
hash模式url里面永远带着#号，我们在开发当中默认使用这个模式。
如果用户考虑url的规范那么就需要使用history模式，因为history模式没有#号，是个正常的url适合推广宣传
功能也有区别，比如我们在开发app的时候有分享页面，那么这个分享出去的页面就是用vue或是react做的，
把这个页面分享到第三方的app里，有的app里面url是不允许带有#号的，所以要将#号去除那么就要使用history模式
如何替换页面url_如何修改url而不刷新页面
weixin_39552472的博客
12-06
2085
在实际的开发工作中可能会有如下需求：需要更改url，但是又不需要页面重新加载。类似于各大单页应用框架的路由实现。首页，有两种方式可以实现更改url而不刷新页面。hash 散列值location.hash = '#hash'
// 更改URL的hash值会在浏览器的历史记录中增加一条新的记录，且不会触发浏览器的刷新。
2. pushState | replaceState 状态管理APIpushSt...
vue-router的两种路由模式hash和history，区别以及它们的底层实现原理
wanghe1111_的博客
03-13
3804
vue的两种路由模式hash和history模式以及它们的底层实现原理
vue-router详解
热门推荐
大灰狼的小绵羊哥哥的博客
06-14
6万+
一、前言要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用<a></a>标签编写链接哪？vue-router如何使用？常见路由操作有哪些？等等这些问题，就是本篇要探讨的主要问题vue-router二、vue-router是什么这里的路由并不是指我们平时所说的硬件路由器，这里的路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-rou...
Vue的两种路由模式
weixin_44402343的博客
05-09
3362
hash模式
1、vue-router默认是hash模式
2、url中有“#”号
3、hash值（“#”后的值）不会被包含在http请求中，改变hash值不会引起页面的重新加载。
4、hash改变会触发hashChange事件，会被浏览器记录下来，可以使用浏览器的前进和后退。
5、hash兼容到IE8以上
6、 会创建hashHistory对象，在访问不同的路由的时候,会发⽣两件事：
HashHistory.push()将新的路由添加到浏览器访问的历史的栈顶
HasHistory.replace()替换
vuejs中路由器的两种模式-哈希模式与历史模式
itclanCoder
08-05
747
虽互不曾谋面,但希望能和您成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊标星公众号（ID：itclanCoder）如果不知道如何操作点击这里,标星不迷路前言路由器分别有两种模式,一种是hash模式,另一种是history模式,在使用vue-cli以及vue-router默认搭建的vue项目,如果不做特殊的配置...
前端路由的前生今世及实现原理
weixin_33935505的博客
11-12
438
??
原文发于我的博客：https://github.com/hwen/blogS...
什么是路由
路由这个概念最先是后端出现的。在以前用模板引擎开发页面时，经常会看到这样
http://hometown.xxx.edu.cn/bbs/forum.php
有时还会有带.asp或.html的路径，这就是所谓的SSR(Server Side...
vue-router中的#
feiyu_may的博客
09-11
1595
vue工程搭建完成后，我们运行在浏览器中打开，会发现url中多了一个#符号，
有#是使用URL hash模式的缘故，#代表网页中的一个位置，右边的字符就是该位置的标识符，从#开始的部分就是URL的锚部分，vue-router默认的是hash模式，如果觉得#在url中影响美观，可以更改为history模式。
history模式不带#号，需要服务器配置。
前端...
weblogic中servlet报404_weblogic中ServletActionContext.getServletContext().getRealPath("/")空指针的解决...
weixin_39652136的博客
12-21
242
问题：在weblogic war 路径 getServletContext().getRealPath()和request.getRealPath，weblogic获取路径总是为NULL，怎么破？？？？？通常情况下载tomcat中，我们以前使用 HttpServletRequest request;request.getRealPath(arg0)但是这是个方法已经过时了。。。。。。。。reque...
“相关推荐”对你有帮助么？
非常没帮助
没帮助
一般
有帮助
非常有帮助
提交
©️2022 CSDN
皮肤主题：编程工作室
设计师：CSDN官方博客
返回首页
lla520
CSDN认证博客专家
CSDN认证企业博客
码龄5年
暂无认证
原创
24万+
周排名
140万+
总排名
17万+
访问
等级
1545
积分
51
粉丝
72
获赞
14
评论
392
收藏
私信
关注
热门文章
vue-router的两种模式的区别
40210
Xcode使用教程详细讲解（上）
26913
思科交换机-常用命令及配置
12015
pwn 题GDB调试技巧和exp模板
10743
OpenCV探索之路（二十四）图像拼接和图像融合技术
10260
最新评论
pwn 题GDB调试技巧和exp模板
coke_pwn:
stack呗
pwn 题GDB调试技巧和exp模板
coke_pwn:
stack呗
OpenCV探索之路（二十四）图像拼接和图像融合技术
幼稚的男孩°:
请问为什么opencv 的比较慢呢
谱聚类实例
qq_37872534:
谱聚类时内存报错怎么解决？
OpenCV探索之路（二十四）图像拼接和图像融合技术
duanyikai:
厉害了？博主
您愿意向朋友推荐“博客详情页”吗？
强烈不推荐
不推荐
一般般
推荐
强烈推荐
提交
最新文章
Springboot系列：Springboot与Thymeleaf模板引擎整合基础教程(附源码)
TypeScript入门知识三（表达式和循环）
为不同类型的网站选择最佳的SSL证书（上）
2017年103篇
目录
目录
最新文章
Springboot系列：Springboot与Thymeleaf模板引擎整合基础教程(附源码)
TypeScript入门知识三（表达式和循环）
为不同类型的网站选择最佳的SSL证书（上）
2017年103篇
目录
评论 1
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额
抵扣说明：
1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。 2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。
余额充值