位置: IT常识 - 正文

VueRouter的两种模式(vuerouter模块化)

编辑:rootadmin
VueRouter的两种模式

推荐整理分享VueRouter的两种模式(vuerouter模块化),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue router mode区别,vuerouter原理,vuerouter原理,vuerouter用法,vuerouter的原理,vuerouter模块化,vuerouter模块化,简述vuerouter,内容如对您有帮助,希望把文章链接给更多的朋友!

前后端分离:利用Ajax,可以在不刷新浏览器的情况下异步数据请求交互。

前端路由:匹配不同的url路径,进行解析,加载不同组件,动态渲染内容,不会向后端发出请求。(VueRouter)

单页应用SPA(只有一个html文件),页面交互和页面刷新都是无刷新的。前后端分离+前端路由来实现。

VueRouter有两种模式:Hash模式、History模式,默认是Hash模式,可以通过mode属性进行设置。

modehistory对象创建依据的类hashnew HashHistory(this, options.base, this.fallback)history​​​​​​​new HTML5History(this, options.base)abstractnew AbstractHistory(this, options.base)一、Hash模式

Hash模式是VueRouter的默认模式,工作原理是利用hashchange事件监听hash的变化,即#xxx,然后通过。可以在window对象上监听这个事件。

window.onhashchange = function(event){ // event.oldURL 表示原来的URL,有#则含#及其后字符串 // event.newURL 表示现在的URL,有#则含#及其后字符串}

HashHistory构造函数:

HashHistory.push() // 将新路由添加到浏览器历史访问栈

HashHistory.replace() // 将浏览器历史访问栈栈顶路由替换成新路由

由于hash变化的URL都被记录在浏览器历史访问栈,尽管浏览器没有访问服务器,但页面内容和URL一一对应,可以使用浏览器的前进和后退功能。

触发hashchange事件的几种情况如下:

1. 浏览器的前进、后退操作会触发window.location.hash的变化,从而触发hashchange事件。

2. 当只改变浏览器地址栏URL的哈希值,此时回车,浏览器不会发送任何请求给服务器,只会触发hashchange事件。

3. 当在浏览器地址栏URL中输入一个包含hash的url,此时回车,浏览器会发送除hash外的地址请求给服务器,请求完成,设置hash值,触发hashchange事件。

4. 标签<a>的href属性可以设置为页面某元素的ID(如#top),点击跳转到该ID元素所在区域,同时浏览器自动设置window.location.hash属性,地址中的hash也会变化成其ID(如#top),触发hashchange事件。

二、History模式

Hash模式的缺点:

1. hash本来用于做页面定位,若用来做路由,原锚点公共失效。

2. Hash模式的传参基于url,若有复杂的数据会有体积的限制。History模式除了可以利用url传参,还可以将数据存放一个特定的对象中。

3. 路径书写不简约。

History模式的书写更加简洁,去掉#。充分利用HTML5 History Interface中新增的pushState()和replaceState()方法,这俩个方法应用于浏览器的历史记录栈(window.history指向History对象,表示当前窗口的浏览历史),使得不刷新页面改变url地址。在已有的back()、forward()、go()(接受一个整数作为参数,若参数超过实际存在的网址范围,该范围无效果;若不指定参数,默认参数为0,相当于刷新页面)的基础上,提供了对历史记录修改的功能。

前进和后退操作时都不会请求服务器,而是通过popstate事件监听,刷新页面才会向服务器发起请求。

2.1 History.pushSate()

用于在浏览器历史访问栈中添加一条记录,该方法不会刷新页面,只是导致History对象发生变化,地址栏会发生变化。使用该方法后,可以用History.state读出状态对象。

History.pushSate(object, title, url)

VueRouter的两种模式(vuerouter模块化)

object:一个对象,通过pushState方法可以将该对象内容传递到新页面中,若不需要,填null。

title:标题,几乎没有浏览器支持该参数,传一个空字符串。

url:新的网站,需与当前页面处于同一个域。不指定默认为当前地址。若设置跨域地址,会报错。

若在url中设置#xxx,不会触发hashchange事件。

2.2 History.replaceSate()

用于修改History对象的当前记录,用法同History.pushSate(object, title, url)。

2.3 popstate事件

仅仅调用pushSate()或replaceState()方法,不会触发该事件。

只有用户点击浏览器前进和后退,或使用脚本调用history.back()、history.forward()、history.go()方法才会触发popstate事件。

该事件仅针对同一个文档,若浏览历史的切换,导致加载不同的文档,该事件也不会触发。

第一次加载不会触发popstate事件。

其回调函数的参数为event对象,state属性指向pushSate()和replaceState()方法提供的History的当前对象,也可以通过history.state获得该对象。

当页面刷新时,需要向服务器发起请求。History模式的url会全部传给服务器,即服务器需要匹配完成的URL,否则报404错误,需要后端配置路由。Hash模式的url的哈希值不会携带在请求中。

三、使用路由模块实现页面跳转的方式

1. 修改地址栏

2. this.$router.push('路由地址')

3. <router-link  to="路由地址"></router-link>

四、Hash模式和History模式的相同点和不同点

相同点:

1. 都是VueRouter的模式配置选项。

2. 都可以用作SPA(单页面应用)的实现,实现前端路由,不向服务器发起请求,动态渲染页面。

不同点:

1. Hash模式需要#xxx(哈希值),History模式书写更简约。

2. Hash模式是通过window对象监听hashchange事件,根据hash值的变化来动态渲染页面的;History模式是通过window对象监听popstate事件,当浏览器前进和后退时,获取当前history对象状态即history.state来动态渲染组件。

3. Hash模式创建history对象是依赖HashHistory构造函数;History模式创建history对象是依赖HTML5History构造函数。

Hash模式利用HashHistory.push()和HashHistory.replace()可以将hash变化的URL都被记录在浏览器历史访问栈,实现页面内容和URL一一对应,从而可以使用浏览器的前进和后退功能。

History模式利用HTML5History.pushState()和HTML5History.replaceState()修改页面的url地址,修改history对象的状态,而不刷新页面。

4. Hash模式通过携带在url中传递参数;History模式既可以通过携带在url中传递参数,也可以将数据存放在一个特定的对象中。

5. Hash模式只有hash值设置为不同于上次时,才会被添加进历史记录栈;History模式可以记录相同的url。

6. Hash模式只能修改#之后的部分;History模式的pushState设置的新的url可以是于当前url同源的任意url。

本文链接地址:https://www.jiuchutong.com/zhishi/299878.html 转载请保留说明!

上一篇:Boundary Loss 原理与代码解析(bounded linear functional)

下一篇:python机器人编程——差速机器人小车的控制,控制模型、轨迹跟踪,轨迹规划、自动泊车(上)(python机器人编程控制)

  • 微信群违规还能恢复吗(微信群违规还能解封吗)

    微信群违规还能恢复吗(微信群违规还能解封吗)

  • 收藏的视频删除了怎么恢复(我的收藏视频删除了怎么恢复)

    收藏的视频删除了怎么恢复(我的收藏视频删除了怎么恢复)

  • 目前没有安装描述文件是什么意思(目前没有安装描述文件怎么安装软件)

    目前没有安装描述文件是什么意思(目前没有安装描述文件怎么安装软件)

  • 淘宝发的文档怎么下载(淘宝发的文档怎么修改)

    淘宝发的文档怎么下载(淘宝发的文档怎么修改)

  • ich7主板可以用什么cpu(ich7m主板支持cpu列表)

    ich7主板可以用什么cpu(ich7m主板支持cpu列表)

  • oppofindx有指纹识别么(oppofindx有没有指纹功能)

    oppofindx有指纹识别么(oppofindx有没有指纹功能)

  • 苹果7p屏幕可以装8p吗(苹果7p屏幕可以换来8p用吗)

    苹果7p屏幕可以装8p吗(苹果7p屏幕可以换来8p用吗)

  • 爱奇艺属于腾讯吗(爱奇艺属于腾讯还是阿里)

    爱奇艺属于腾讯吗(爱奇艺属于腾讯还是阿里)

  • 消除手机wifi感叹号(手机wifi连接提醒怎么关闭)

    消除手机wifi感叹号(手机wifi连接提醒怎么关闭)

  • 钉钉直播中途退出再进入时间怎么算(钉钉直播中途退出再进入会清零吗)

    钉钉直播中途退出再进入时间怎么算(钉钉直播中途退出再进入会清零吗)

  • 如何取消华为智慧助手(如何取消华为智慧搜索)

    如何取消华为智慧助手(如何取消华为智慧搜索)

  • 快手加入黑名单会怎样(快手加入黑名单关系会解除吗)

    快手加入黑名单会怎样(快手加入黑名单关系会解除吗)

  • 抖音怎么发私信给关注的人(抖音怎么发私信能引起她的注意)

    抖音怎么发私信给关注的人(抖音怎么发私信能引起她的注意)

  • ipad用安卓耳机吗(ipad2020安卓耳机)

    ipad用安卓耳机吗(ipad2020安卓耳机)

  • iphone7怎么改字体(iphone7怎么改字体样式)

    iphone7怎么改字体(iphone7怎么改字体样式)

  • 华为手机通话设置在哪里找到(华为手机通话设置在哪里陌生号码打啊通怎么样设置)

    华为手机通话设置在哪里找到(华为手机通话设置在哪里陌生号码打啊通怎么样设置)

  • 打印机如何扫描至电脑(打印机如何扫描到电脑里面)

    打印机如何扫描至电脑(打印机如何扫描到电脑里面)

  • 手机卡不用了微信怎么办(手机卡不用了微信号怎么找回密码)

    手机卡不用了微信怎么办(手机卡不用了微信号怎么找回密码)

  • 手机上nnbs是啥意思(手机ny是什么)

    手机上nnbs是啥意思(手机ny是什么)

  • 苹果xsmax怎么微信美颜(苹果xsmax怎么微信加密)

    苹果xsmax怎么微信美颜(苹果xsmax怎么微信加密)

  • 抖音的图片怎么提取(抖音的图片怎么下载保存)

    抖音的图片怎么提取(抖音的图片怎么下载保存)

  • 微博音乐带三角怎么发(微博怎么带音乐三角形2018版)

    微博音乐带三角怎么发(微博怎么带音乐三角形2018版)

  • 网卡不支持1000m宽带怎么办(网卡不支持5gwifi怎么办)

    网卡不支持1000m宽带怎么办(网卡不支持5gwifi怎么办)

  • 微信单个表情怎么删除(微信单个表情怎么制作)

    微信单个表情怎么删除(微信单个表情怎么制作)

  • Win11 22000.51版本还原“旧版”文件管理器、右键菜单方法(win11版本22000.194)

    Win11 22000.51版本还原“旧版”文件管理器、右键菜单方法(win11版本22000.194)

  • 在win10中,为何桌面新建文件夹提示“无法创建文件夹”?(win10为什么毛病这么多)

    在win10中,为何桌面新建文件夹提示“无法创建文件夹”?(win10为什么毛病这么多)

  • helpsvc.exe是什么进程 作用是什么 helpsvc进程查询(help是什么文件夹可以删除吗)

    helpsvc.exe是什么进程 作用是什么 helpsvc进程查询(help是什么文件夹可以删除吗)

  • 个人注册电子税务局
  • 企业税号还未开户
  • 差额征税是如何计算的
  • 小规模纳税人购入和销售的增值税
  • 固定资产账务处理实操
  • 土地增值税计税依据
  • 广州二手房免增值税
  • 企业职工薪酬的个人所得税纳税筹划研究
  • 非货币性资产交换固定资产清理
  • 进口缴纳的关税通过什么核算
  • 小规模购买金税盘可以全额抵扣吗
  • 诉讼费走哪个会计科目
  • 房地产收到客户房款如何做账
  • 出租无形资产的收入
  • 未收到增值税专用发票怎么处理
  • 私车公用税务政策性文件
  • 合同印花税进哪个科目
  • 公司股东会承担法律责任吗
  • 出差住宿费普票可以抵扣进项税吗为什么
  • 转账支票到期了怎么兑现
  • safedownloader是什么
  • 实收资本或股本的账务处理
  • 纳税确有困难标准
  • PHP:xml_get_error_code()的用法_XML解析器函数
  • 付款给代账公司的费用是什么科目
  • 深入php:面向对象、模式与实践
  • 行政事业单位怎么考
  • firefox有什么用
  • element ui+vue
  • php的session
  • 有限责任公司股东会的职权有哪些?
  • 最小的洗衣机是多少
  • 微信小程序插件有哪些
  • php返回对象
  • 营业外收入不计入所有者权益吗
  • 金融性资产有哪些
  • 电子汇票追索是什么意思
  • javascript零基础
  • pytorch csdn
  • chat top
  • php 银行卡支付
  • 通用机打发票可以查验吗
  • 建筑劳保费返还政策
  • 业务出差餐费如何记账
  • 爬虫工程师简介
  • 一个例子解释唯物辩证法三大规律
  • 应收账款计提坏账准备是什么意思
  • 织梦系统
  • 当月纳税申报期是什么意思
  • 自行开具增值税专用发票怎么开
  • 以无形资产换入固定资产发生的净损益
  • 公司购买商品房能折旧吗
  • 研发费用如何做账
  • 城镇土地使用税百度百科
  • 进口货物只有报关单能入账吗
  • 应发和实发工资账务处理
  • 投资收益下期间怎么结转
  • 工程内部承包合同
  • 工资核算模块初始设置的内容有
  • sql server数据库中的null(空值)
  • 该程序无法正常启动
  • win10蓝屏怎么修复系统
  • server core安装完成后按什么进行登录
  • 苹果mac安装win7系统
  • linux防御
  • win10激活后是什么样子
  • centos怎么设置
  • Linux如何使用命令
  • unity 漫反射
  • Unity3D游戏开发pdf
  • linux文件inode详解
  • 简单的设计模式
  • python网络爬虫项目步骤
  • jquery fullpage
  • 保险理赔款如何分配
  • 张江税务所地址
  • 1+征收率
  • 河南省个人无犯罪证明书
  • 社保征管职责是什么
  • epc项目不接受联合体投标违规吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设