• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧
您的位置:首页 > CMS教程 >建站教程 > vue-router两种模式有什么区别

vue-router两种模式有什么区别

作者:站长图库 字体:[增加 减小] 来源:互联网

站长图库向大家介绍了vue-router两种模式等相关知识,希望对您有所帮助

区别:1、history的url没有“#”号,而hash有;3、history修改的url可以是同域的任意url,而hash是同文档的url;3、相同的url,history会触发添加到浏览器历史记录栈中,而hash不会触发。


vue-router两种模式有什么区别


vue-router两种模式

1.hash模式

vue-router默认的是hash’[h??] '模式,使用URL的hash来模拟一个完整的URL,于是当URL改变的时候,页面不会重新加载,也就是单页面应用了。当#后面的hash发生变化,不会导致浏览器向服务器发出请求,浏览器不会发出请求就不会刷新页面,并且会触发hasChange这个事件,通过监听hash值的变化来实现更新页面部分内容的操作。

对于hash模式会创建hashHistory对象,在访问不同的路由的时候,会发生两件事:

HashHistory.push()将新的路由添加到浏览器访问的历史的栈顶,和HasHistory.replace()替换到当前栈顶的路由。

vue-router两种模式有什么区别

2.history模式

因为HTML5标准的发布,多了两个API,pushState() 和 replaceState()。通过这两个API

(1)可以改变url地址且不会发送请求。

(2)不仅可以读取历史记录栈,还可以对浏览器历史记录栈进行修改。

除此之外,还有popState(),当浏览器跳转到新的状态时,将触发popState事件。

添加/修改历史状态

包括了pushState,replaceState两个方法,这两个方法接收三个参数:stateObj,title,url

// 逐条添加历史记录条目window.history.pushState(stateObject, title, URL)// 修改历史记录window.history.replaceState(stateObject, title, URL)

切换历史记录

包括 back 、forward、go三个方法,对应浏览的前进(forward)、后退(back)、跳转(go)操作。


区别:

history和hash都是利用浏览器的两种特性实现前端路由,history是利用浏览历史记录栈的API实现,hash是监听location对象hash值变化事件来实现

history的url没有’#'号,hash反之

history修改的url可以是同域的任意url,hash是同文档的url

相同的url,history会触发添加到浏览器历史记录栈中,hash不会触发。


history和hash的优点和缺点

history比hash的url美观(没有’#'号)

history修改的url可以是同域的任意url,hash则只能是同文档的url

history模式往往需要后端支持,如果后端nginx没有覆盖路由地址,就会返回404,hash因为是同文档的url,即使后端没有覆盖路由地址,也不会返回404

hash模式下,如果把url作为参数传后端,那么后端会直接从’#‘号截断,只处理’#'号前的url,因此会存在#后的参数内容丢失的问题,不过这个问题hash模式下也有解决的方法。


history模式怕啥

不怕前进,不怕后退,就怕刷新,(如果后端没有准备的话),因为刷新是实实在在地去请求服务器的。

在history模式下,你可以自由的修改path。history模式最终的路由都体现在url的pathname中,这部分是会传到服务器端的,因此需要服务端对每一个可能的path值都作相应的映射。

当刷新时,如果服务器中没有相应的响应或者资源,会分分钟刷出一个404来。


分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

相关文章

  • Illustrator绘制卡通立体效果的小熊图标
  • 介绍Javascript实现定时器倒计时
  • Discuz!您当前的访问请求当中含有非法字符,已经被系统拒绝解决办法
  • dedecms修改摘要、标题、缩略图等字数和大小限制
  • mysql聚簇索引和非聚簇索引的区别
  • Photoshop制作逼真的镶嵌钻石艺术字
  • PHP调用实现波场交互[支持TRX/TRC20]
  • PHP采集插件QueryList实践教学
  • AI制作立体三维线条字母标志
  • 总结分享Go中常用的strings函数

文章分类

  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧

最近更新的内容

    • 利用纹理素材及图层样式制作个性的金色纹理字
    • 两分钟带你了解在CSS中三种使图片居中的方法
    • Apache Log4j 2.17.0已发布!看看解决了什么问题?
    • 手把手带你在小程序中实现保存图片组件功能
    • ThinkPHP5框架中Redis是如何使用和封装?
    • 织梦DedeCMS系统列表页调用TAG标签并带上链接的实
    • PS绘制苹果APP应用金属相机图标
    • phpcms后台上传不了图片怎么办
    • PS打造线描风格舞者壁纸平面作品设计制作教程
    • 浅谈小程序怎么实现列表滚动上下联动效果

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有